最新消息:flex弹性布局更新完毕,阅读地址:http://www.01happy.com/css-flex/

svg中viewbox图解分析

html5 43浏览 1评论

svg中有一个viewbox属性,中文翻译为视区,就是在svg上截取一小块,放大到整个svg显示。

这个属性初学的话有点难以理解,这边做一个简单的示例,一看就明白了。

1)先来一个svg,宽高各位300,设置一下边框:

<svg width="300" height="300" style="border: 1px solid steelblue">
</svg>

运行效果:

svg中viewbox

svg中viewbox

这边其实就是一个300*300的矩形。

2)svg里面画一个矩形:

<svg width="300" height="300" style="border: 1px solid steelblue">
	<rect x="10" y="10" width="200" height="100" fill="skyblue"></rect>
</svg>

运行效果:

svg中viewbox矩形

svg中viewbox矩形

3)设置svg的viewbox属性:

<svg width="300" height="300" style="border: 1px solid steelblue"
	viewbox="105 55 60 60">
<rect x="10" y="10" width="200" height="100" fill="skyblue"></rect>
</svg>

先分析一下原理,再来看效果,上面设置的viewbox的值为:105 55 60 60,每个参数的含义如下:

105 表示相对于svg左上角的横坐标。
55 表示相对于svg左上角的纵坐标。
60 表示截取的视区的宽度。
60 表示截取的视区的高度。

图示原理:

svg中viewbox等比例截图

svg中viewbox等比例截图

4) 非等比例的viewbox

上面的viewbox宽高和svg等比例,如果等比例,那么就是其中一边放到最大。

<svg width="300" height="300" style="border: 1px solid steelblue"
	viewbox="105 55 60 60">
<rect x="10" y="10" width="200" height="100" fill="skyblue"></rect>
</svg>

图示原理:

svg中viewbox等比例截图

svg中viewbox等比例截图

还有不理解的可以给我留言。

转载请注明:快乐编程 » svg中viewbox图解分析

发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 大佬厉害了,一看就明白了。
    潇洒非常2周前 (10-10)回复