走进SVG之图像编程第二章 [SVG世界-视窗-视野]

在SVG中，它的世界是无穷大的，我们定义所以图形都会被构建。而我们在浏览器中看到的画面其实是我们定义的视窗和视野。

<svg height="500" width="200">  height和width控制我们的视窗大小

<svg height="500" width="200" viewBox="0 0 500 200" preserveAspectRadtio ="xMidYMid meet" >复制代码

viewBox="x,y,width,height"  x轴与y轴的值的参照物是<svg>,width和height越大距离svg的视野也越远，width和height越小距离svg的视野也越近。

preserveAspectRadtio : align meetOrSlice   align视窗相对视野的方向

svg图形分组

当我们创建完一套图形时候可以对此图形进行定义为分组，并且在后面可以使用<use>进行<g>分组引用。这里我们就要用到<g>

<g>
    <rect width="20" height="100" fill="red" x="0" y="0">
    <rect width="50" height="10" fill="red" x="0" y="100">
</g>复制代码

1.

对<g>设置属性，它的所有子标签都会被继承。

2.<g>可以嵌套使用

3.<g>可以使用transform进行坐标转换

<use xlink:href="#"> 分组引用,xlink:href=为<g>标签的id

SVG文本

共有属性：

X:  定位X轴位置

y: 定位Y轴位置

dx: 相对于文本基线位置的X轴偏移

dy： 相对于文本基线位置的Y轴偏移

style: 设置样式

转载于:https://juejin.im/post/5bcf22346fb9a05cf90870a7