Как выровнять объект в документе SVG? - PullRequest
Новая
       35

Как выровнять объект в документе SVG?

33 голосов
/ 23 декабря 2010

Есть ли способ выровнять объект (скажем, прямоугольник) в SVG относительно правой границы группы или документа? Я хочу, чтобы объект сохранял свой размер, когда я увеличивал всю ширину документа, но увеличивал положение X, чтобы выровнять по правому краю.

С уважением,

Ответы [ 3 ]

40 голосов
/ 12 июня 2011

Я искал способ разместить элемент справа от файла SVG с шириной = 100%. Таким образом, можно масштабировать изображение, и мой элемент будет придерживаться вправо без масштабирования.

Вот что я узнал: 

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    version="1.1" 
    baseProfile="full" 
    width="100%" 
    height="100%"> 

    <svg viewBox="0 0 300 300" width="100%" height="300px" 
        preserveAspectRatio="xMaxYMin meet"> 
        <g transform="skewX(45)" style="fill:red;">
            <rect x="0" y="0" height="100%" width="20px" /> 
            <rect x="270" y="0" height="100%" width="20px" /> 
        </g> 
    </svg> 
</svg>

Хитрость заключается в использовании тега , в который вы помещаете свой элемент, который вы хотите прикрепить к правой границе. Затем вы говорите тегу не масштабировать внутренние элементы и перемещать их так, чтобы значения x были максимальными, а y минимальными (xMaxYMin) 

preserveAspectRatio="xMaxYMin meet"

Точно так же вы можете центрировать его ...

Источник: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

12 голосов
/ 07 июня 2014

У меня был тот же вопрос, и первоначально мне понравился ответ Кулпае. Однако проблема для меня заключалась в том, что я пытаюсь создать интерфейс типа скроллера в SVG с выровненной по левому краю кнопкой для прокрутки влево и выровненной по правому краю кнопкой для прокрутки вправо и внутреннего (viewBoxed) svg в kulpae Например, для всей ширины скроллера необходимо скрыть содержимое скроллера от получения событий щелчка.

Мое решение использовало вложенный svg-элемент со 100% -ным положением по x и кнопкой с отрицательным положением по x: 

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="100%" height="100%"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <svg id="rightAlign" x="100%" y="0" width="0" height="200" style="overflow: visible;">
        <rect id="rightBtn" width="50" height="200" x="-50" y="0" fill="#ff0000"></rect>
    </svg>
    <svg id="leftAlign" x="0" y="0" width="0" height="200" style="overflow: visible;">
        <rect id="leftBtn" width="50" height="200" x="0" y="0" fill="#ff0000"></rect>
    </svg>
</svg>
9 голосов
/ 21 ноября 2017

Некромантия.
Различные выравнивания для preserveAspectRatio :

верхний левый 

preserveAspectRatio="xMinYMin meet"

верхний правый: 

preserveAspectRatio="xMaxYMin meet"

левый нижний 

preserveAspectRatio="xMinYMax meet"

правый нижний 

preserveAspectRatio="xMaxYMax meet"

Пример: 

<svg xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 2560 1600" preserveAspectRatio="xMaxYMin meet">
...