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

问题描述

我有一个位于 (组)中的 svg ，我想对其进行缩放，然后按百分比进行翻译的视口.svg 中的大部分内容都允许通过大量选项来指定单位；例如px, em, %, ex, pt, pc, ... 然而似乎翻译中指定的数字只是像素.

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.

事实是，如果我必须返回并重新计算翻译的像素值，那么我的 svg 将变得依赖于分辨率.那么我，你和每个人都会陷入一个悖论.你会明白我为什么有点担心.

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

推荐答案

将 元素粘贴到内部 元素中并添加 x 和y 带有百分比值的属性到内部 <svg> 元素来翻译它.

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>

如果您希望先应用比例，您可以将 <svg> 元素放在 <g> 中.

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

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