【整理】svg中的宽width，height，viewbox的含义和关系

折腾：

期间，需要去搞清楚

svg中，对于实际的显示出来的宽度和高度

和width，height，viewbox，之间到底是什么关系，到底是谁决定的

svg width height viewbox

viewbox决定了：

It defines the aspect ratio of the image.
It defines how all the lengths and coordinates used inside the SVG should be scaled to fit the total space available.
It defines the origin of the SVG coordinate system, the point where x=0 and y=0.

通过这段解释：

“Some example viewBox values:

viewBox=”0 0 100 100″: Defines a coordinate system 100 units wide and 100 units high. In other words, if your SVG contains a circle centered in the graphic with radius of 50px, it would fill up the height or width of the SVG image, even if the image was displayed full screen. If your SVG contained a rectangle with height=”1in”, it would also nearly fill up the screen, because 1 inch = 96px in CSS, and all lengths will get scaled equally.

”

大概明白了之前的代码：

<circle

cx=”50%”

cy=”50%”

r=”50″

fill=”none”

transform=”rotate(-135 55 55)”

stroke={color}

stroke-width={borderWidth + ‘px’}

stroke-dasharray={`${0.75 * 314}, 314`}

</svg>

的含义：

这个svg的宽和高是110

中间居中有个圆圈circle，半径是50

而直径=50×2=100

还剩110-100=10

10/2=5 -》上下左右，距离边框还有5px的padding

这就是我们看到的效果：

（请忽略我加的背景色）

“SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！”

svg width height viewbox 解释

【总结】

参考：

解释的比较清楚。

Post Views: 1,893