如何按视口的百分比转换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>.