如何在 em 中缩放 SVG 多边形? [英] How do I scale an SVG polygon in ems?

问题描述

我将 元素直接嵌入到 HTML5 文档中，并且我想根据页面的字体大小缩放重复的背景图案.没问题，SVG 支持 CSS 单位，所以我可以用 em 指定大小，对吗?

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?

SVG 规范声明所有坐标 和 长度 可以使用或不使用单位标识符来指定.而且，事实上，这两个都完全符合我的期望:

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

但是多边形(例如)有自己的完全不同的定义单词坐标"，这样会引发错误而不是绘制 1 em 三角形:

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.

并且转换，例如scale"需要一个数字，" 不是坐标"或长度"，所以这也是不允许的(我的浏览器似乎默默地忽略了转换"属性):

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

所以我想我什至不知道如何绘制 1 em 三角形，更不用说更复杂的东西了.我是否忽略了一种合理的做法?不合理的方式呢?我应该放弃并使用 元素代替，还是会更糟?

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?

推荐答案

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

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>

这篇关于如何在 em 中缩放 SVG 多边形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！