如何在ems中缩放SVG多边形? [英] How do I scale an SVG polygon in ems?
问题描述
我直接在HTML5文档中嵌入< svg>
元素,并且想要根据页面的字体大小来缩放重复的背景图案。没问题,SVG支持CSS单元,所以我可以用ems指定大小,对吗?
SVG spec 声明All coordinates 和长度可以使用或不使用单位标识符来指定SVG。而且,实际上,这两种做法正是我所希望的:
< rect x ='1em'y =' 2em'width ='3em'height ='4em'/>
< circle cx ='6em'cy ='7em'r ='8em'/>
但是多边形(例如)有自己的完全不同的定义的单词坐标,这样会产生一个错误,而不是画一个三角形:
< polygon points ='0 0,0 1em,1em 0'/>
路径也是一样 - 可以理解,因为它们已经在使用这些字母来达到不同的目的。
并且转换(如缩放)需要数字,而不是一个坐标或长度,所以这也是不允许的(我的浏览器似乎默默地忽略了transform属性):
< polygon points ='0 0,0 1,1 0'transform ='scale(1em)'/>
所以我想我甚至无法弄清楚如何画出1个三角形,更不用说了更复杂。我忽略了一个合理的做法吗?那不合理的方式呢?我应该放弃并使用< canvas>
元素,还是会更糟?
您可以将多边形封装在内部< svg>
元素中,以便按需要缩放它们。 viewBox控制它所包含对象的坐标系,height和width属性控制它看起来有多大。
< svg的xmlns = http://www.w3.org/2000/svg >
< svg viewBox =0 0 1 1height =1emwidth =1emy =7em>
< polygon points ='0 0,0 1,1 0'/>
< / svg>
< circle cx ='6em'cy ='7em'r ='2em'/>
< / svg>
I'm embedding an <svg>
element directly in an HTML5 document, and I want to scale a repeating background pattern in terms of the page's font size. No problem, SVG supports CSS units, so I can just specify the size in ems, right?
The SVG spec claims "All coordinates and lengths in SVG can be specified with or without a unit identifier." And, indeed, both of these do exactly what I was hoping for:
<rect x='1em' y='2em' width='3em' height='4em' />
<circle cx='6em' cy='7em' r='8em' />
But polygons (for example) have their own completely different definition of the word "coordinate," such that this raises an error instead of drawing a 1 em triangle:
<polygon points='0 0, 0 1em, 1em 0' />
Paths are the same way -- understandably, since they're already using the letters for a different purpose.
And transformations such as "scale" expect a "number," not a "coordinate" or "length", so this isn't allowed either (my browser seems to silently ignore the "transform" attribute):
<polygon points='0 0, 0 1, 1 0' transform='scale(1em)' />
So I guess I can't even figure out how to draw a 1 em triangle, much less anything more complicated. Am I overlooking a reasonable way of doing it? What about an unreasonable way? Should I give up and use a <canvas>
element instead, or would that be even worse?
You can wrap your polygons in an inner <svg>
element to scale them as you wish. The viewBox controls the coordinate system of the objects it contains and the height and width attributes control how big it looks.
<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>
这篇关于如何在ems中缩放SVG多边形?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!