Как заставить SVG отображаться без полос прокрутки в html

Как я могу заставить SVG надежно отображаться без полос прокрутки в HTML? Достаточно того, что работает как в Firefox, так и в Chrome.

  • Самый простой шаг заключается в том, что SVG отображается в документе с «естественной» шириной и высотой. Полностью расширен. Без полос прокрутки. файрфокс обычно так делает. Chrome обычно этого не делает (если только я не использую предварительные знания о фактической ширине и высоте).

  • Более сложный шаг заключается в том, что я задаю SVG произвольную ширину (скажем, 400 пикселей), и SVG отображается соответствующим образом масштабированным, сохраняя при этом соотношение сторон. Опять же, нет полосы прокрутки.

Я бы предпочел не знать естественные размеры SVG в HTML. Лучше всего изменить HTML или CSS, хотя изменение SVG (один раз, а не для каждого размера, который я хочу отображать) также было бы хорошо.

Возможно ли такое?

Вот пример html, который встраивает svg.

<html>
    <head><title>SVG Sizing</title></head>
    <body>
        <embed type="image/svg+xml" src="test.svg">
    </body>
</html>

Тег ‹embed› ниже можно изменить на ‹object› или что-то еще, если это необходимо.

Вот пример test.svg:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1200px" height="297px" version="1.1" viewbox="0 0 1200 297" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" stroke-width="1" text-rendering="geometricPrecision">
    <text x="300" y="15" textLength="8" font-family="Helvetica" font-size="12" fill="black" text-anchor="middle"> A </text>
    <text x="900" y="15" textLength="8" font-family="Helvetica" font-size="12" fill="black" text-anchor="middle"> B </text>
    <line x1="300" y1="22" x2="300" y2="47" stroke="black"/>
    <line x1="900" y1="22" x2="900" y2="47" stroke="black"/>
    <text x="587" y="37" textLength="25" font-family="Helvetica" font-size="12" fill="black"> Start </text>
    <line x1="300" y1="272" x2="300" y2="297" stroke="black"/>
    <line x1="900" y1="272" x2="900" y2="297" stroke="black"/>
    <text x="583" y="287" textLength="32" font-family="Helvetica" font-size="12" fill="black"> Finish </text>
    <line x1="150" y1="284" x2="582" y2="284" stroke="black" stroke-dasharray="2,2"/>
    <line x1="618" y1="284" x2="1050" y2="284" stroke="black" stroke-dasharray="2,2"/>
</svg>

Обновление:

Хорошо, кажется, инструмент, который я использую, генерирует SVG с атрибутом viewbox в нижнем регистре, однако это неверно, и имя атрибута на самом деле имеет верблюжий регистр viewBox, как Эрик правильно пишет ниже.

Это в сочетании с удалением ширины/высоты или изменением процента позволяет мне решить обе части вопроса.

Спасибо всем!


svg image-scaling html
person idij    schedule 29.07.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Если вы хотите, чтобы svg заполнил всю ширину/высоту экрана, попробуйте это в html-документе:

<style>
html, body { margin:0; padding:0 }
embed { width: 100%; height: 100% }
</style>

Если вы хотите заполнить меньшую область документа, попробуйте удалить атрибуты ширины и высоты в указанном корневом элементе svg и убедитесь, что есть атрибут viewBox. Затем размер контейнера (встраивания) должен правильно определять размер, и не должно быть полос прокрутки.

person Erik Dahlström    schedule 30.07.2010

arrow_upward
0
arrow_downward

Пытаться :

<svg width="100%" height="100%" ...>

то размер изображения будет изменен до размера (обратите внимание, что вам следует использовать ).

Это будет работать, так как атрибут viewbox заполнен.

person Tangui    schedule 29.07.2010
comment
Это не работает. Результирующая страница показывает сильно обрезанное изображение SVG как в Firefox, так и в Chrome. - person idij; 29.07.2010
comment
Указание ширины и высоты на 100 % равносильно тому, что эти атрибуты вообще не указываются. - person Erik Dahlström; 31.07.2010