目录
svg概要
SVG是一种基于XML语法的图像格式,可以用于制作可缩放的矢量图标,具有体积小、不失真的特点。
<svg></svg>标签是SVG图形的容器,在标签下绘制各种图形,可以理解为是一张画布。width和height属性可以定义画布的宽高。
svg绘制矩形、圆形和椭圆形
绘制矩形--rect标签
属性名词解释:
fill:填充颜色 可以是rgb、十六进制或者单词
stroke-width:边框宽度
stroke:边框颜色,标准叫做笔画属性,这里便于理解叫做边框颜色, stroke-width同理
<body>
<!-- 画布 宽400px 高110px-->
<svg width="400" height="110">
<!-- 矩形 宽300px 高100px fill填充颜色 stroke-width边框宽度 stroke边框颜色 -->
<rect width="300" height="100" fill="blue" stroke-width="2" stroke="black"/>
</svg>
</body>
设置透明度
属性名词解释:
x:定义矩形距离左边的距离
y:定义矩形距离上面的距离
fill-opacity:定义填充颜色的透明度
stroke-opacity:定义边框透明度 透明度取值0-1 ,0指完全透明
<svg width="400" height="180">
<!-- 矩形 fill填充颜色 stroke-width边框宽度 stroke边框颜色 -->
<rect width="150" height="150" fill="blue" stroke-width="5" stroke="tomato"
x="50" y="20" fill-opacity="0.1" stroke-opacity="0.9"/>
<!-- x定义矩形距离左边的距离 y定义矩形距离上面的距离
fill-opacity 定义填充颜色的透明度 stroke-opacity定义边框透明度 -->
</svg>
也可以设置整个元素的不透明度,在rect标签上写opacity属性 取值0-1
添加圆角
属性名词解释:
rx:定义圆角x轴方向的半径长度
ry:定义圆角y轴方向的半径长度
<svg width="400" height="180">
<rect width="150" height="150" fill="blue" stroke-width="5" stroke="pink"
x="50" y="20" opcity="0.5" rx="20" ry="20"/>
</svg>
当rx和ry的值相同 是圆角,当二者不同椭圆形角
绘制圆形--circle标签
属性名词解释:
cx: 定义圆形中心的x坐标。
cy: 定义圆形中心的y坐标。若不设置坐标,默认(0,0)
r: 定义圆形半径。
<svg width="400" height="180">
<circle cx="50" cy="50" r="40" fill="#888" stroke-width="3" stroke="pink"/>
</svg>
绘制椭圆形--ellipse标签
属性名词解释:
cx:定义椭圆中心的x坐标。
cy:定义椭圆中心的y坐标。
rx:定义水平半径。
ry:定义垂直半径。
<svg width="500" height="140">
<ellipse cx="200" cy="80" rx="100" ry="50" fill="yellow" stroke="purple"/>
</svg>
椭圆的位置是根据cx和cy决定的
椭圆的嵌套
<svg width="500" height="120">
<ellipse cx="200" cy="70" rx="100" ry="40" fill="yellow" />
<ellipse cx="200" cy="75" rx="60" ry="30" fill="white" />
</svg>
svg绘制线条、多边形和线条
svg绘制线条--line标签
属性名词解释:
x1:x轴起点坐标 y1:y轴起点坐标
x2:x轴终点坐标 y2:y轴终点坐标
坐标的起点是左上角
<svg>
<line x1="10" y1="10" x2="100" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
svg绘制多边形--polygon标签
属性名词解释:
points:定义多边形每个角的x和y轴坐标,最少三个坐标,最后是一个封闭图形
<svg>
<polygon points="200,20 100,50 160,120" fill="lime" stroke="blue" stroke-width="3"></polygon>
</svg>
<svg>
<polygon points="200,20 100,50 160,120 90,100" fill="lime" stroke="blue" stroke-width="3"></polygon>
</svg>
五角星
<br>
<svg>
<polygon points="200,20 100,50 160,120 90,100" fill="lime" stroke="blue" stroke-width="3"></polygon>
</svg>
绘制多线条--polyline
属性名词解释:
points:定义线条的拐点
fill="none"指不设置填充色
<svg width="500" height="200">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" stroke="pink" stroke-width="3" fill="none"></polyline>
</svg>
svg绘制文本--text标签
属性名词解释:
x和y属性:文本开始的坐标
font-size: 文字大小
text-anchor:文本对齐方式,start:左端对齐坐标 middle:文本中间对齐坐标 end:文本右边对齐
<svg width="300" height="30">
<text x="0" y="15" fill="red">
I love SVG!!!
</text>
</svg>
fill在这里表示字体颜色
svg里为什么不用p标签来显示文本呢?
因为text是绘制对象,我们可以使用svg一些专有特性控制文本了,比如旋转字体
旋转文本
属性名词解释:
transform=" rotate(30 20,40) ":第一个参数 是旋转角度,第二个参数是旋转中心坐标,默认(0,0),两个参数用空格分开
<svg width="300" height="60">
<text x="0" y="15" fill="red" transform="rotate(30,20,40)">
I love SVG!!!
</text>
</svg>
text标签可以包含多个tspan标签
<svg width="300" height="90">
<text x="0" y="15" fill="red" >
外面的字
<tspan x="10" y="45"> 里面的字1 </tspan>
<tspan x="10" y="70"> 里面的字2 </tspan>
</text>
</svg>
文本也可以添加超链接!
属性名词解释:
xlink:href="链接地址"
target:
使用a标签要在svg标签是添加命名空间 xmlns:xlink="http://www.w3.org/1999/xlink"
<svg width="200" height="30" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="text2.html" target="_blank">
<text x="10" y="15" fill="red"> love!!</text>
</a>
</svg>
点击文字就可以跳转,href属性也可以实现跳转,但速度相对慢
svg绘制路径--path标签
它可以绘制任何形状的图形
属性名词解释:
d: 绘制路径的命令,M定义起点,比如让(150,0)作为起点, d="M150 0",l定义下一个点,比如 d="M150 0 l75 200" 表示从(150,0)到(75,200).注意区分大小写,大写是绝对定位,小写是相对定位,绝对定位是相对于屏幕坐标原点的位置,相对定位是相对上一个点的位置
<svg width="400" height="210">
<path d="M150 0 L75 200 L255 200"></path>
</svg>
polygon也可以绘制多边形,但path的绘制能力更强,比如path可以绘制一条贝塞尔曲线。参考下图,q表示定义控制点
方便理解,我们模拟一张二次贝塞尔曲线静态图
A为起点,B为控制点,C为终点,在线段AB、BC上有一个绿色切线,蓝色为绘制的贝塞尔曲线
1.绘制三个点
<!-- 可以使用g标签把多个绘图元素包裹起来,在g标签上定义公共属性 -->
<svg width="450" height="400">
<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>
<tspan x="100" y="350" dx="-30">A</tspan>
<tspan x="250" y="50" dx="-10">B</tspan>
<tspan x="400" y="350" dx="30">C</tspan>
</text>
</g>
</svg>
2.连接AB和BC并绘制绿色切线
<!-- 可以使用g标签把多个绘图元素包裹起来,在g标签上定义公共属性 -->
<svg width="450" height="400">
<!-- 连接AB和BC -->
<path d="M100 350 L250 50 L400 350" stroke="red" stroke-width="3" fill="none"></path>
<!-- 绘制绿色切线 -->
<path d="M175 200 l150 0" stroke="green" stroke-width="3" fill="none"></path>
<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>
<tspan x="100" y="350" dx="-30">A</tspan>
<tspan x="250" y="50" dx="-10">B</tspan>
<tspan x="400" y="350" dx="30">C</tspan>
</text>
</g>
</svg>
3.绘制贝塞尔曲线
<!-- 可以使用g标签把多个绘图元素包裹起来,在g标签上定义公共属性 -->
<svg width="450" height="400">
<!-- 连接AB和BC -->
<path d="M100 350 L250 50 L400 350" stroke="red" stroke-width="3" fill="none"></path>
<!-- 绘制绿色切线 -->
<path d="M175 200 l150 0" stroke="green" stroke-width="3" fill="none"></path>
<!-- 绘制贝塞尔曲线 -->
<path d="M100 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>
<tspan x="100" y="350" dx="-30">A</tspan>
<tspan x="250" y="50" dx="-10">B</tspan>
<tspan x="400" y="350" dx="30">C</tspan>
</text>
</g>
</svg>
接下来把除了贝塞尔曲线的path,其余代码注释掉,就能得到标准的贝塞尔曲线了。
svg描边属性
明天更新