最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

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

CSS crifan 5607浏览 0评论

折腾:

【已解决】ReactJS的布局在小米3手机中布局错乱

期间,需要去搞清楚

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

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

svg width height viewbox

How to Scale SVG | CSS-Tricks

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.

大概明白了之前的代码:

<svg height=”100%” width=”100%” viewBox=”0 0 110 110″>
  <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 viewport,viewBox,preserveAspectRatio缩放 « 张鑫旭-鑫空间-鑫生活

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

Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio

SVG 研究之路 (23) – 理解 viewport 與 viewbox – OXXO.STUDIO

Perplexed by SVG viewBox, width, height, etc – Stack Overflow

svg width height viewbox 解释

理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio_SVG 教程_w3cplus

【总结】

参考:

SVG 中 viewport 与 viewbox 的区别

解释的比较清楚。

转载请注明:在路上 » 【整理】svg中的宽width,height,viewbox的含义和关系

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.183 seconds, using 22.23MB memory