前端之家收集整理的这篇文章主要介绍了
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>内的元素代替。
原文链接：https://www.f2er.com/html/232827.html
