如何用视口的百分比翻译SVG组 [英] How to translate an SVG group by a percentage of the viewport

问题描述

我有一个< g> （组），而我有一个svg < rect>想要缩放它，然后通过视口的百分比来翻译它。 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

解决方案

粘贴<$在内部< svg> 元素中添加c和c元素，并将包含百分比值的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> 内的元素。

I have an svg <rect> that is in a <g> (group) and I would like to scale it and then translate it by a percentage of the viewport. Most everything in svg allows the specification of units through a ridiculous number of options; e.g. px, em, %, ex, pt, pc, ... However it seems that the number specified in the translation is only pixels.

Thing is that if I have to go back and recalculate the pixel values for the translation, then my svg becomes resolution dependent. Then me, you and everyone would get sucked into a paradox. You can see why I'm a little concerned.

<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

解决方案

Stick the <g> element in an inner <svg> element and add x and y attributes with percentage values to the inner <svg> element to translate it.

<svg>
  <svg x="10%" y="20%">
    <g transform="scale(1, 1)">
      <rect x="45%" y="25%" height="50%" width="10%"/>
    </g>
  </svg>
</svg>

If you want the scale to apply first you would put the <svg> element inside the <g> instead.

这篇关于如何用视口的百分比翻译SVG组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！