在css中定义时,svg translate选项不适用于g

Question

我想从css翻译g#node

CSS

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

HTML

<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),那么一切都正常工作.当我在内部设置translate时,一切都正常.

我如何设置来自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>