Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
474 views
in Technique[技术] by (71.8m points)

alignment - How to align an object in SVG document?

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,

question from:https://stackoverflow.com/questions/4517979/how-to-align-an-object-in-svg-document

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...