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

我正在嵌入< 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,这样就会引发错误,而不是绘制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>相反,或者更糟糕的是？

解决方法

您可以将多边形包装在内部< 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,1 0' />
  </svg>
  <circle cx='6em' cy='7em' r='2em' />
</svg>