Как заставить SVG появиться без полос прокрутки в HTML
Как я могу заставить SVG появиться надежно без полос прокрутки в HTML? Что-то, что работает и в Firefox и в Chrome, достаточно.
Самый основной шаг - то, что 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>
Обновление:
Хорошо, кажется инструментом, который я использую, генерирует SVGs с нижним регистром viewbox атрибут, это неправильно однако, и название атрибута является на самом деле Camel-регистром viewBox поскольку Erik пишет правильно ниже.
Это объединилось с удалением ширины/высоты, или изменение в проценте позволяет мне достигать обеих частей вопроса.
Спасибо все!
2 ответа
Если вы хотите, чтобы svg заполнял всю ширину / высоту экрана, попробуйте это в HTML-документе:
<style>
html, body { margin:0; padding:0 }
embed { width: 100%; height: 100% }
</style>
Если вы хотите заполнить меньшую область документа, попробуйте удалить атрибуты width и height в указанном корневом элементе svg и убедитесь, что существует атрибут viewBox . Затем размер контейнера (встраивания) должен правильно определять размер, и полос прокрутки быть не должно.
Попробуйте:
<svg width="100%" height="100%" ...>
, тогда размер изображения будет изменен до размера (обратите внимание, что вам лучше использовать).
Это будет работать, поскольку атрибут окна просмотра заполнен.