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

我直接在HTML5文档中嵌入<svg>元素，我想根据页面的字体大小来缩放重复的背景图案。没问题，SVG支持CSS单元，所以我可以在ems中指定大小，对吧？如何在ems中缩放SVG多边形？

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)' />

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

来源

2011-12-15 zaphod

您可以将多边形封装在内部的<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>

来源

2011-12-15 10:37:36

辉煌。谢谢！ – zaphod 2011-12-16 05:20:54

您可以将变形应用到任何物品并使用em或任何其他单位。

例如，这工作得很好：

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

来源

2016-09-09 19:39:39

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

回答

相关问题