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

前端之家收集整理的这篇文章主要介绍了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>内的元素代替。

猜你在找的HTML相关文章