43

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

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

4

1 回答 1

39

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

于 2013-06-14T08:09:06.073 回答