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

有没有一种方法可以将SVG中的对象（例如，rect）与组或文档的右边框对齐？当我增加整个文档宽度时，我希望对象保持其大小，但增加X位置以保持右对齐

---

关于，

我正在寻找一种方法，将一个元素浮动到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> 

用同样的方法你可以把它居中

资料来源：

---

我有同样的问题，起初喜欢库尔佩的回答。但是，我的问题是，我试图在SVG中创建一个滚动类型的界面，其中左对齐的按钮用于向左滚动，右对齐的按钮用于向右滚动，kulpae示例中的内部（viewBoxed）SVG将占据滚动条的整个宽度，因此，会使滚动条的内容无法接收单击事件

我的解决方案为按钮使用了一个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>

亡灵巫术。
各种对齐方式用于：

左上角

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

亡灵巫术。再说一遍

对于CSS，包括在SVG中支持CSS的

calc（）

（），这在浏览器中也适用：

这对文本的效果如何？我并不总是事先知道文本的宽度。@posfan12如果您试图右对齐文本，可能需要将其放置在一个您知道宽度的容器中。您可以将所述容器内的文本与文本锚点右对齐

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