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

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

Привет,

Ответ 1

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

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

<?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>

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

preserveAspectRatio="xMaxYMin meet"

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

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

Ответ 2

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

В моем решении использовался элемент с 5-позиционным элементом svg с 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>

Ответ 3

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

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

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">