如何按视口的百分比翻译 SVG 组答案

【问题标题】：How to translate an SVG group by a percentage of the viewport如何按视口的百分比翻译 SVG 组
【发布时间】：2013-06-13 22:39:44
【问题描述】：

我有一个 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>

【问题讨论】：

标签： html svg

【解决方案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> 中。

【讨论】：