如何进行svg百分比转换

Question

我想用相当于 Translate="translate(50% - 100,0)" 的东西将矩形居中，例如：

    <svg width="100%" height="100%" viewbox="0 0 100% 100%">
        <g transform="translate(50% - 100,0)">
            <rect width="200" height="100" fill="rgb(0,0,255)" />
        </g>
    </svg>

我找不到正确的语法。

Answer 1

您可以使用内部<svg>元素通过其 x 属性执行百分比部分，然后使用<g>已有的元素执行其余部分。

我不确定您对 viewBox 的意图是什么，但百分比值在那里无效。看起来你根本不需要那个。

<svg width="100%" height="100%">
    <svg x="50%" overflow="visible">
        <g transform="translate(-100,0)">
            <rect width="200" height="100" fill="rgb(0,0,255)" />
        </g>
    </svg>
</svg>