html - 如何按视口的百分比翻译 SVG 组

Question

我有<rect>一个（组）中的svg，<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>

score 39 · Accepted Answer

将元素粘贴到<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>。

1 回答 1