Question

有没有办法在SVG中对齐一个对象（比方说，rect），相对于一个组或文档的右边框？我希望对象保持其大小，当我增加整个文档宽度时，但增加X位置以保持右对齐。

此致

Answer 1

我正在寻找一种方法来漂浮一个＆lt; g取代;宽度= 100％的svg文件右侧的元素。因此，可以缩放图像和我的＆lt; 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>

诀窍是使用＆lt; SVG＆GT;标记，您放置元素的位置，您想要粘贴到右边框。然后你告诉＆lt; svg＆gt; -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-located嵌套的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">

Answer 4

死灵法术。再次。

从包括 calc() (Mozilla Devs) 在内的 CSS 开始，在 SVG 中支持 CSS，这也适用于浏览器：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px">

  <rect x="0" y="0" height="100%" width="25px" fill="#bce0fd" />
  <rect x="calc(100% - 25px)" y="0" height="100%" width="25px" fill="#bce0fd" />

</svg>

怎么样？ x 或 width 属性和 ="calc(100% - ??px)"

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

4 个答案: