Question

我正在将一个<svg>元素直接嵌入到HTML5文档中，我想根据页面的字体大小来缩放重复的背景图案。没问题，SVG支持CSS单位，所以我只能在ems中指定大小，对吗？

SVG规范claims“SVG中的所有coordinates和lengths都可以使用或不使用单位标识符进行指定。”事实上，这两者都完全符合我的希望：

<rect x='1em' y='2em' width='3em' height='4em' />
<circle cx='6em' cy='7em' r='8em' />

但是多边形（例如）有自己的completely different definition单词“coordinate”，这样就会引发错误而不是绘制1 em三角形：

<polygon points='0 0, 0 1em, 1em 0' />

Paths也是一样的 - 可以理解，因为他们已经将这些字母用于不同的目的。

而transformations如“scale”期望一个“数字”，而不是“坐标”或“长度”，所以这也是不允许的（我的浏览器似乎默默地忽略了“transform”属性）：

<polygon points='0 0, 0 1, 1 0' transform='scale(1em)' />

所以我想我甚至无法弄清楚如何绘制1 em三角形，更不用说更复杂的东西了。我是否忽视了合理的做法？那不合理的方式呢？我应该放弃并使用<canvas>元素，还是会更糟？

Answer 1

您可以将多边形包装在内部<svg>元素中，以根据需要缩放它们。 viewBox控制它包含的对象的坐标系，高度和宽度属性控制它看起来有多大。

<svg xmlns="http://www.w3.org/2000/svg">
  <svg viewBox="0 0 1 1" height="1em" width="1em" y="7em">
      <polygon points='0 0, 0 1, 1 0' />
  </svg>
  <circle cx='6em' cy='7em' r='2em' />
</svg>

Answer 2

您可以将变换应用于任何项目并使用em或任何其他单位。

例如，这很好用：

<polygon points='0 0, 0 1, 1 0' transform='scale(2em 1.5em)' />

如何在ems中缩放SVG多边形？

2 个答案: