Встроенное выравнивание SVG в HTML - PullRequest
Новая
       33

Встроенное выравнивание SVG в HTML

4 голосов
/ 26 января 2012

В настоящее время у меня возникают проблемы с выравниванием встроенного SVG внутри ограничивающего DIV, как в этом примере. 

<!DOCTYPE html>
<html>
<body>
    <div style="border: 1px solid black; height: 50px; width: 100px; vertical-align:top;">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"">
            <rect x="0" y="0" width="100" height="100" style="fill: red;" />
        </svg>
    </div>
</body>
</html>

Размер SVG изменяется в соответствии с размерами элемента div, но я не могу установить какое-либо выравнивание для SVG. Похоже, что ни выравнивание текста, ни выравнивание по вертикали не работают в Firefox 9, Chrome 18, IE 9 или Opera 11.61. Я просто хочу разместить встроенный SVG в верхнем левом углу DIV.

Обратите внимание, что в моем случае окружающий DIV имеет динамическое измерение (% -значения), поэтому использование абсолютного позиционирования не работает.

Кто-нибудь знает, как настроить SVG в этом случае?

Ответы [ 2 ]

21 голосов
/ 26 января 2012

Добавить preserveAspectRatio="xMinYMin" в качестве атрибута элемента svg, например, http://jsfiddle.net/longsonr/fLWhu/

0 голосов
/ 10 февраля 2015

Добавить preserveAspectRatio="xMidYMid meet" атрибут к <svg> элементу согласно http://tutorials.jenkov.com/svg/svg-viewport-view-box.html.

...