How to align an object in SVG document?

Question

Is there a way to align an object (say, rect) in SVG, relative to the right border of a group or the document? I want the object to keep its size, when I increase the whole document width, but increase X position to stay right-aligned.

Regards,

Answer 1

I was looking for a way to float a < g> element to the right of a svg file with width=100%. So one could scale the image and my < g> element would stick to the right without beeing scaled.

Here is what I found out:

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

The trick is to use a < svg> tag, where you place your element, that you want to stick to the right border. Then you tell the < svg>-tag not to scale the inner elements and to move them so, that the x values are at their maximum and y at minimum (xMaxYMin)

preserveAspectRatio="xMaxYMin meet"

In the same way you can center it...

source: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

Answer 2

I had the same question and initially liked kulpae's answer. The problem for me, though, was that I'm trying to make a scroller-type interface in SVG with a left-aligned button for scrolling left and a right-aligned button for scrolling right, and the inner (viewBoxed) svg in kulpae's example would take the entire width of the scroller, therefore obscuring the content of the scroller from receiving click events.

My solution used a 100% x-positioned nested svg element with a negative x-positioned element for the button:

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

Answer 3

Necromancing.
The various aligns:

top-left

preserveAspectRatio="xMinYMin meet"

top-right:

preserveAspectRatio="xMaxYMin meet"

left-bottom

preserveAspectRatio="xMinYMax meet"

right-bottom

preserveAspectRatio="xMaxYMax meet"

Example:

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