走进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: 设置样式