如何使用<svg> viewBox属性？
我是从svg的官方文档中学习的，有这样的一行。我不明白，如果它已经有了width和height属性，那么在viewBox="0 0 1500 1000"中再次指定它有什么意义呢？它是这样定义的：“一个px单位等于一个用户单位，因此5px的长度等于官方文档中的长度”5“，因此这个viewBox是一个1500px宽1000高的视图，超过了300px和200px。那么为什么它首先要定义宽度和高度值呢？
<svg width="300px" height="200px" version="1.1"
viewBox="0 0 1500 1000" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">回答 6
Stack Overflow用户
发布于 2013-03-11 10:31:41
宽度和高度是<svg>的大小。viewBox控制其内容的显示方式，因此viewBox="0 0 1500 1000“将按5倍的比例缩小<svg>元素的内容(1500 / 300 =5和1000 / 200 = 5)，并且内容的大小将是不使用viewBox而不使用<svg>时的1/5
假设你有一个弹性表面，并将其等分成4个部分。如果你扔掉3块，你得到的曲面大小是原始曲面的四分之一。如果现在拉伸曲面并使其大小与原始曲面相同，则曲面上的所有内容都将是原始曲面的两倍大小。这就是viewBox和width/height的关系。
Stack Overflow用户
发布于 2013-06-03 01:36:15
如果不指定viewbox，则假定元素中的所有无单位数字都是像素。( SVG假定将像厘米这样的单位转换为像素时为90 dpi或像素/英寸。)
viewbox允许您使元素中的无单位数字表示“用户单位”，并指定如何将这些单位映射到大小。为简单起见，仅考虑x坐标，即标尺。您的viewbox显示您的标尺将有1500个单位来匹配svg的200像素大小宽度。
从0到1500 (无单位，即用户单位)的直线元素将在绘制时拉伸200像素，即跨越svg绘图的宽度。
(由于SVG可以在不损失分辨率的情况下进行扩展，因此当用户放大或缩小时，像素在现实世界中并没有多大意义。)
这是一种坐标变换。
我建议您学习一本像"SVG Essentials“这样的书，大约用了10美元，我大致引用了这个答案。
Stack Overflow用户
发布于 2017-12-30 05:56:59
默认情况下
<svg width="300" height="200">svg网格的“标尺”以像素为单位( svg中的所有形状都以像素为单位)
但是你想使用你自己的单位，你可以使用viewBox attr来实现：
<svg width="300" height="200" viewBox="0 0 1500 1000">这意味着：
水平轴： 1500 (宽度单位)= 300px => 1(宽度单位)= 300/1500px = 1/5px
垂直轴： 1000 (高度单位)= 200px => 1(高度单位)= 200/1000px = 1/5px
- 现在svg中的所有形状都将缩放：
与原点相比，它们的宽度比例为1/5px (1/5 <1 =>比例)。
与原点相比，它们的高度也缩放到1/5px (1/5 <1 =>比例缩小)
https://stackoverflow.com/questions/15335926
复制
相似问题
如何使用‘viewBox’标签设置svg的使用属性？
理解svg的viewbox属性
如何通过viewBox计算SVG viewBox？
在SVG JavaScript viewBox中使用缩放的viewBox动画属性值
svg viewBox属性移动子位置
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
