svg学习笔记

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"  stroke-width="2" fill="red" />
</svg>

svg的样式属性

fill：填充颜色（与backgroudColor效果一样）
fill-opacity：填充颜色透明度

stroke：边框/文本颜色
stroke-width：边框/文本宽度
stroke-opacity：边框/文本颜色透明度
stroke-linecap：定义不同类型的开放路径的终结(具体什么意思不理解，怼着文档用)，三种值：butt，round，square
stroke-dasharray：创建虚线， 如
<path fill="none" stroke="black" stroke-width="4" stroke-dasharray="20,10,5,5,5,10" d="M5 20 l215 0" />：表示20黑，10间隔，5黑，5间隔，5黑，10间隔，

svg预定义的形状元素

1.矩形

<!--
	svg标签属性：
	xmlns: 定义svg命名空间
	version：定义所使用的svg版本
	width,height: 设置svg文档的宽度和高度
 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="800">
	<rect width="100" height="60" x="30" y="20" fill="red"/>
	<!-- 代码两行效果相同 -->
	<rect width="100" height="60" x="30" y="20" style="fill:red;"/>
</svg>

rect矩形：
width、height: 设置矩形的宽度和高度
x、y：设置矩形到浏览器窗口左侧的距离30px和顶端的距离20px
rx、ry: 可使矩形产生圆角

2.圆形

<circle cx="100" cy="50" r="40" stroke="black"  stroke-width="2" fill="red" />

circle圆形
cx、cy：圆形坐标，如果忽略这两个属性，那么圆点会被设置为(0,0)
r：圆形半径

3.椭圆

<ellipse cx="100" cy="150" rx="80" ry="40" style="fill:red;"></ellipse>

ellipse椭圆
cx、cy：椭圆圆心坐标
rx、ry：横向半径，纵向半径

4.线

<line x1="100" y1="100" x2="300" y2="20" style="stroke: red; stroke-width: 6;"></line>

line 线
x1: 在x轴定义线条的开始
y1: 在y轴定义线条的开始
x2: 在x轴定义线条的结束
y2: 在y轴定义线条的结束

5.折线

<polyline points="100,0 120,0 120,20 140,20 140,40 160,40 160,60 180,60 180,80 200,80" style="stroke: red; stroke-width: 2; fill: none;"></polyline>

polyline 折线
points: 折线每个坐标点的位置（fill设置为none，可以仅仅画曲线，而如果fill有值，则会形成由曲线围成的多边形）
注：折线第一个点不会和最后一个点连起来（不会闭合）
<polyline points="150,200 150,350 240,350 240,290" style="stroke: red; stroke-width: 2; fill: none;"></polyline>

6.多边形

<polygon points="150,200 150,350 240,350 240,290" style="stroke: red; stroke-width: 2; fill: none;"></polygon>

polygon 多边形

注：多边形第一个点和最后一个点会连接起来，形成闭合的图形