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

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

Самым основным шагом является то, что SVG появляется как это «естественный» ширина и высота в документе. Полностью расширена. Без полос прокрутки. firefox в целом делает. 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>

< встраивать > тег ниже, при необходимости может быть изменен на < объекта > или что-то другое.

Вот пример 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>

Update:

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

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

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

источник

2010-07-29 idij

Если вы хотите SVG, чтобы заполнить всю ширину/высоту экрана попробовать это в HTML документе:

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

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

источник

2010-07-30 20:38:43

Try:

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

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

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

источник

2010-07-29 15:16:14 Tangui

Это не работает. На полученной странице отображается сильно обрезанное изображение SVG как в Firefox, так и в Chrome. – idij

Указание ширины и высоты на 100% - это то же самое, что вообще не указывать эти атрибуты. –

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

ответ

Смежные вопросы