1.绘制文本
transform="rotate(30 20,40)":代表的是文本的倾斜情况,30代表角度,20,40代表的是以哪个坐标为旋转中心,默认为0,0
案例:
源代码:
<svg width="300" height="30">
<text x="0" y="15" fill="red">I love SVG!</text>
</svg>
<br>
<svg width="200" height="60">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG!</text>
</svg>
<br>
<!-- 多行文本 -->
<svg width="200" height="90">
<text x="10" y="20" fill="red">
Several lines
<tspan x="10" y="45">First line</tspan>
<tspan x="10" y="70">Second line</tspan>
</text>
</svg>
<br>
<!-- 实现点击文本,进行网页的跳转,第一个链接为固定链接 -->
<svg width="200" height="30" xmlns:xlink="https://www.w3.org/1999/xlink">
<a xlink:href="http://www.baidu.com" target="_black">
<text x="10" y="15" fill="red">I love SVG!</text>
</a>
</svg>
2.绘制路径
M和L区分大小写:
大写为绝对定位,小写为相对定位:
二次贝塞尔曲线:
绘制贝塞尔曲线:
案例:
源代码:
(注)红色那行是绘制贝塞尔曲线的代码,其余代码为辅助代码,图中蓝色线条就是贝塞尔曲线。
<svg width="450" height="400">
<path d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
<path d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="3" fill="none" />
<g fill="black">
<circle cx="100" cy="350" r="3" />
<circle cx="250" cy="50" r="3" />
<circle cx="400" cy="350" r="3" />
</g>
<g font-size="30" fill="black" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dx="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
3.SVG的描边
案例:
源代码:
<!-- 直线,颜色不同 -->
<svg width="300" height="80">
<g fill="none">
<path stroke="red" d="M5 20 l215 0"></path>
<path stroke="black" d="M5 40 l215 0"></path>
<path stroke="blue" d="M5 60 l215 0"></path>
</g>
</svg>
<br>
<!-- 线条的宽度不同 -->
<svg width="300" height="80">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0"></path>
<path stroke-width="4" d="M5 40 l215 0"></path>
<path stroke-width="6" d="M5 60 l215 0"></path>
</g>
</svg>
<br>
<!-- 线条的端帽不同,butt:默认,round:圆形,square:方形 -->
<svg width="300" height="80">
<g fill="none" stroke="black" stroke-width="6" >
<path stroke-linecap="butt" d="M5 20 l215 0"></path>
<path stroke-linecap="round" d="M5 40 l215 0"></path>
<path stroke-linecap="square" d="M5 60 l215 0"></path>
</g>
</svg>
<br>
<!-- 虚线 -->
<svg width="300" height="80">
<g fill="none" stroke="black" stroke-width="4" >
<path stroke-dasharray="5,5" d="M5 20 l215 0"></path>
<path stroke-dasharray="10,10" d="M5 40 l215 0"></path>
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0"></path>
</g>
</svg>