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

【问题标题】：How do I scale an SVG polygon in ems?如何在 ems 中缩放 SVG 多边形？
【发布时间】：2015-10-29 20:49:14
【问题描述】：

我在 HTML5 文档中直接嵌入了一个 <svg> 元素，并且我想根据页面的字体大小缩放重复的背景图案。没问题，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，因此这会引发错误，而不是绘制一个 1 em 的三角形：

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

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

而transformations 诸如“比例”需要一个“数字”而不是“坐标”或“长度”，所以这也是不允许的（我的浏览器似乎默默地忽略了“变换”属性）：

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

所以我想我什至无法弄清楚如何绘制一个 1 em 的三角形，更不用说更复杂的了。我是否忽略了一种合理的做法？不合理的方式怎么办？我应该放弃并改用<canvas> 元素，还是会更糟？

【问题讨论】：

标签： html svg

【解决方案1】：

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

例如，这很好用：

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

【讨论】：

这在 Edge 版本 87.0.664.75 中对我不起作用

【解决方案2】：

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

<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>

【讨论】：