如何翻译svg元素本身？

Question

我在翻译svg元素时遇到了麻烦。

以下是我所拥有的样本

<svg transform="translate(500,150)">
   <g>
   </g>
</svg>

似乎当我应用此翻译时，只有<g>被翻译。我必须将svg的宽度扩展得足够大，以便<g>仍然在svg内。

有没有办法翻译svg本身？

Answer 1

如果要在HTML页面中移动顶级SVG，则需要使用CSS transform styles，包括供应商前缀和长度单位，而不是SVG转换属性。

<svg style="-webkit-transform:translate(500px,150px);transform:translate(500px,150px)">
   <g>
   </g>
</svg>

（或使用样式表而不是内联CSS）

如果你的SVG是一个嵌套元素（即在一个更大的SVG中），那么transform属性应该可以工作。

如果这不能解答您的问题，请创建simple working example正在发生的事情，并尝试更清楚地解释您想要发生的事情。