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