如何在SVG文档中对齐对象？

Question

有没有办法在SVG中对齐一个对象(比如说,rect),相对于一个组或文档的右边界？当我增加整个文档宽度时,我希望对象保持其大小,但是增加X位置以保持右对齐.

问候,

Answer 1

我正在寻找一种方法将<g>元素浮动到宽度= 100%的svg文件的右侧.因此,人们可以缩放图像,我的<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

Answer 2

我有同样的问题,最初喜欢kulpae的答案.但问题是,我试图在SVG中创建一个滚动式界面,左对齐按钮用于向左滚动,右对齐按钮用于向右滚动,内部(viewBoxed)svg在kulpae中示例将占据滚动条的整个宽度,因此使滚动条的内容不受接收点击事件的影响.

我的解决方案使用了一个100%x定位的嵌套svg元素,按钮的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>

Answer 3

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