HTML5   发布时间:2022-04-26  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html5 – 如何在ems中缩放SVG多边形?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在嵌入< svg>直接在 HTML5文档中的元素,我想根据页面的字体大小缩放重复的背景图案.没问题,SVG支持CSS单位,所以我只能在ems中指定大小,对吗?

可以使用或不使用单元标识符指定SVG规范claims“SVG中的所有coordinateslengths”.事实上,这两者都完全符合我的希望:

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

大佬总结

以上是大佬教程为你收集整理的html5 – 如何在ems中缩放SVG多边形?全部内容,希望文章能够帮你解决html5 – 如何在ems中缩放SVG多边形?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。