html - 在 css 中定义时，svg 翻译选项不适用于 g

Question

我要翻译g#node使用 CSS

#node{
    transform: translate(200, 50);
} 

<svg id="canvas" width="1000" height="1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
    <g id="node">
        <rect width="104" height="27" rx="15" ry="15" id="node-2" transform="translate(30, 50)" ></rect>
        <rect width="104" height="20" rx="15" ry="15" id="node-1" transform="translate(10, 20)" ></rect>
    </g>
</svg>

但是翻译选项在 CSS 中不起作用。但是如果我替换 translate()与 scale(2)一切正常。此外，当我在内部设置翻译时 <g> element 一切正常。

如何设置从 CSS 翻译？

Answer 1

问题与翻译单元有关。您需要明确提及该单位是 px 或其他单位。

#node {
  transform: translate(200px, 50px);
}

<svg id="canvas" width="1000" height="1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <g id="node">
    <rect width="104" height="27" rx="15" ry="15" id="node-2" transform="translate(30, 50)"></rect>
    <rect width="104" height="20" rx="15" ry="15" id="node-1" transform="translate(10, 20)"></rect>
  </g>
</svg>