html – 如何按视窗的百分比翻译SVG组

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

解决方法

坚持< 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>内的元素代替。