javascript - 如何翻译 svg 元素本身？

Question

我在翻译 svg 元素时遇到问题。

这是我所拥有的示例

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

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

有没有办法翻译 svg 本身？

Answer 1

如果您想在 HTML 页面内移动顶级 SVG，则需要使用 CSS transform styles ，包括 vendor 前缀和长度单位，而不是 SVG 变换属性。

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

(或使用样式表代替内联 CSS)

如果您的 SVG 是嵌套元素(即在较大的 SVG 中)，则转换属性应该有效。

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