如何按视口的百分比转换SVG组

Question

我有一个svg <rect>，它位于<g>（群组）中，我想缩放它，然后将其翻译为视口的百分比。 svg中的大多数内容都允许通过一系列荒谬的选项来指定单位;例如px，em，％，ex，pt，pc，...但是，似乎翻译中指定的数字只是像素。

事情是，如果我必须返回并重新计算翻译的像素值，那么我的svg将依赖于分辨率。然后我，你和每个人都会陷入悖论。你可以看出为什么我有点担心。

<svg>
  <g transform="scale(1, 1) translate(0, 0)">
    <rect x="45%" y="25%" height="50%" width="10%"/>
  </g>
</svg>

http://jsbin.com/ubeqot/1/edit

Answer 1

将<g>元素粘贴到内部<svg>元素中，并将具有百分比值的x和y属性添加到内部<svg>元素中以进行翻译。

<svg>
  <svg x="10%" y="20%">
    <g transform="scale(1, 1)">
      <rect x="45%" y="25%" height="50%" width="10%"/>
    </g>
  </svg>
</svg>

如果您希望首先应用比例，则可以将<svg>元素放在<g>内。