Врезанный SVG урезан

Question

Я встроил объект SVG в страницу HTML следующим образом:

<embed id="svgImg" src="bo5rkbgs5vtsmv053regld2t14.svg"
 type="image/svg+xml" />

Однако результирующее изображение (как в Firefox, так и в Chrome) обрезается и выглядит так:

(обратите внимание, что «Step Response» и «Time» не отображаются должным образом). Я проверил файл на стороне сервера, и это нормально. Есть идеи?

Answer 1

После просмотра вашего кода ваш svg-образ все еще слишком мал.

Вам необходимо установить высоту 100% и высоту изображения 500px.

<embed id="svgImg" height="100%" type="image/svg+xml" src="s1d5ckv8bojltpturlonh1uap5.svg">
<svg width="576" height="500" viewBox="0 0 576 432" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

....

Это исправляет проблему в Firefox v8.0

Answer 2

Просто настройте атрибут viewBox, чтобы он соответствовал вашему изображению.

Например, вы можете попробовать это:

viewBox="-10 -10 596 452"

Обновление: Чтобы создать viewBoxдинамически с JS, что-то вроде этого должно работать:

var bbox = document.documentElement.getBBox();
var viewbox = document.documentElement.viewBox.baseVal;
viewbox.x = bbox.x;
viewbox.y = bbox.y;
viewbox.width = bbox.width;
viewbox.height = bbox.height;

Обратите внимание, что это должно быть сделано в документе svg, поэтому вам может потребоваться доступ к нему из HTML-документа, который его встраивает, если это такпосмотрите на этот пример .