Как заставить SVG появляться без полос прокрутки в HTML - PullRequest
Новая
       33

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

1 голос
/ 29 июля 2010

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

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

  • Более продвинутый шаг что я даю 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>

Обновление:

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

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

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

Ответы [ 2 ]

2 голосов
/ 31 июля 2010

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

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

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

0 голосов
/ 29 июля 2010

Попробуйте: 

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

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

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

...