javascript - SVG - 用百分比制作 viewBox(0, 0, 100%, 100%)
问题描述
如何使 SVG viewBox 用户坐标系与 SVG 本身提供的视口坐标系相同(height="100%" 和 width="100%")?
对于我正在做的项目,我需要这种特殊情况,SVG 元素应该是响应式的,但我们仍然需要在 SVG 本身上保持 100% 的高度和宽度。
所以,我需要这样的东西:
<svg height="100%" width="100%" viewBox="0, 0, 100%, 100%">
<circle cx="25" cy="25" r="20" stroke="black" strokeWidth="1" fill="black" />
</svg>
.. 但 viewBox 属性不接受百分比。
解决方案
viewBox 中不允许使用 %/px,这些是最大坐标。
默认情况下,SVG 内容包含在 SVG 大小中。
如果您希望内容拉伸到 100%,请使用 禁用纵横比preserveAspectRatio="none"
。
您还可以使用preserveAspectRatio="slice"
使内容覆盖 SVG(如background-size: cover
)。
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
有一些关于此的好文章:https ://css-tricks.com/scale-svg/和https://alligator.io/svg/preserve-aspect-ratio/
推荐阅读
- php - 我的表单有可变数量的字段。如何使用 PHP 将每个字段提交到 MySQL 数据库?
- github - GitHub Actions (Workflows) 错误 - 计费问题
- javascript - Rails 6:无法让选择助手的 HTML 选项正常工作
- python - pyqt5坚持进口
- javascript - 在可能未定义的对象上调用函数 javascript
- python - 如何提高这段代码的内存效率?
- reactjs - React Native 将电影的 api 数据显示到屏幕上
- angular - 为什么不在 Angular 中使用 new 运算符来创建依赖?
- java - 如何将本机查询打印到控制台?
- react-native - Stripe 如何与 google pay 和 apple pay 在 react native 中协同工作