html - 如何按视口(viewport)的百分比平移 SVG 组

Question

我有一个 svg <rect>那是在 <g> (组)，我想缩放它，然后按视口(viewport)的百分比转换它。 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> 内的元素相反。