SVG基本使⽤（⼆常⽤属性、绘制路径⽂本超链接图⽚、结构标签）⼀、SVG常⽤属性
1.fill: 修改填充颜⾊
2.fill-opacity: 0~1 设置填充颜⾊的透明度
3.stroke: 修改描边颜⾊
4.stroke-width: 修改描边宽度
5.stroke-opacity: 0~1 设置描边透明度
6.stroke-linecap: butt(两边都没有)/square（两边为⽅块）/round （两边为圆形）设置线段两端帽⼦
7.stroke-dasharray: 设置虚线
8.stroke-dashoffset: 设置虚线偏移位
整数：往左边偏移
负数：往右边偏移
9.stroke-linejoin: miter（直⾓）/bevel（切⾓）/round（圆⾓） 设置折线转⾓样式
注意点：在SVG这些所有的常⽤属性都可以直接在CSS中使⽤的。
<svg width="500" height="500">
<rect x="100" y="0" width="50" height="50" fill="#aef"></rect>
<rect x="100" y="0" width="50" height="50" fill="#aef"></rect>
<rect x="100" y="55" width="50" height="50" fill="#aef" fill-opacity="0.2"></rect>
<line x1="100" y1="110" x2="200" y2="110" stroke="#aef"></line>
<line x1="100" y1="130" x2="200" y2="130" stroke="#aef" stroke-width="10"></line>
<line x1="100" y1="150" x2="200" y2="150" stroke="#aef" stroke-width="10" stroke-opacity="0.5"></line>
<line x1="100" y1="170" x2="200" y2="170" stroke="#aef" stroke-width="10" stroke-linecap="butt"></line>
<line x1="100" y1="190" x2="200" y2="190" stroke="#aef" stroke-width="10" stroke-linecap="square"></line>
<line x1="100" y1="230" x2="200" y2="230" stroke="#aef" stroke-width="10" stroke-dasharray="10 20"></line>
<line x1="100" y1="250" x2="200" y2="250" stroke="#aef" stroke-width="10" stroke-dasharray="10" stroke-dashoffset="15"></line>
<line class="line" x1="200" y1="270" x2="250" y2="270"></line>
<polyline points="300 50 400 50 400 100" stroke="#aef" stroke-width="10" stroke-linejoin="miter"></polyline>
<polyline points="300 160 400 160 400 260" stroke="#aef" stroke-width="10" stroke-linejoin="round"></polyline>
<polyline points="300 270 400 270 400 370" stroke="#aef" stroke-width="10" stroke-linejoin="bevel"></polyline>
</svg>
⼆、绘制路径
1.什么是SVG路径
SVG路径⽼⽜了, 可以绘制任意图形, 只不过⽐较复杂⽽已
2.绘制直线
M = moveto 起点
L = lineto 其它点
H = horizontal lineto 当前点的Y和上⼀个点Y相等
V = vertical lineto 当前点的X和上⼀个点X相等
Z = closepath 关闭当前路径
路径指令注意点
⼤写字母是绝对定位, ⼩写字母是相对定位
绝对定位: 写什么位置就是什么位置
相对定位: 相对上⼀次的位置, 在上⼀次位置基础上做调整
<svg width="500" height="500">
<!--直线-->
<path d="M 100 10 L 300 10" stroke="#adc" stroke-width="5"></path>
<path d="M 100 200 l 300 200" stroke="#adc" stroke-width="5"></path>//相对位置。
<!--折线-->
<path d="M 100 20 L 300 20 L 300 60" stroke="#adc" fill="none" stroke-width="5"></path>
<!--绘制简单图形-->
<path d="M 100 80 L 200 80 L 200 100 Z" stroke="#adc" fill="none" stroke-width="5"></path> <path d="M 100 150 H 200 V 200 Z" stroke="#adc" fill="none" stroke-width="5"></path>
</svg>
3、绘制圆弧
A = elliptical Arc
A(rx, ry, xr, laf, sf, x, y) 从当前位置绘制弧线到指定位置
rx (radiux-x): 弧线X半径
ry (radiux-y): 弧线Y半径
xr (xAxis-rotation): 弧线所在椭圆旋转⾓度
laf(large-arc-flag): 是否选择弧长较长的那⼀段
sf (sweep-flag): 是否顺时针绘制
x,y: 弧的终点位置
<path d="M 100 20 A 100 50 0 0 0 200 80" stroke="#afc" fill="none" stroke-width="5"></path> <path d="M 100 140 A 100 50 0 1 0 200 200" stroke="#afc" fill="none" stroke-width="5"></path> <path d="M 100 260 A 100 50 0 0 1 200 320" stroke="#afc" fill="none" stroke-width="5"></path> <path d="M 100 380 A 100 50 0 1 1 200 440" stroke="#afc" fill="none" stroke-width="5"></path>
S = smooth curveto
S(x2, y2, x, y) 从当前位置光滑的绘制三次贝塞尔曲线到指定位置
T = smooth quadratic Bézier curveto
T(x, y) 从当前位置光滑的绘制⼆次贝塞尔曲线到指定位置
4、绘制贝塞尔曲线
href标签怎么用4.1、什么是贝塞尔曲线
4.2、贝塞尔曲线应⽤场景：⽔滴形变效果
4.3、绘制：Q = quadratic Bézier curve
Q(x1, y1, x, y) 从当前位置绘制⼆次贝塞尔曲线到指定位置
x1,y1: 控制点位置
x,y: 终点位置
C = curveto
C(x1, y1, x2, y2, x, y) 从当前位置绘制三次贝塞尔曲线到指定位置
x1, y1: 控制点1位置
x2, y2: 控制点2位置
x, y: 终点位置
<path d="M 100 100 Q 150 50 200 100" stroke="#adf" fill="none"></path><!--⼆次-->
<path d="M 200 200 C 200 100 200 50 300 100" stroke="#adf" fill="none"></path><!--三次-->
5.绘制路径⽂本
绘制路径⽂本步骤
1.定义⼀个路径。
2.使⽤dets隐藏路径
3.使⽤textPath标签告诉⽂字，使⽤哪⼀个路径绘制。
注意点：若绘制路径⽂本，那么超出路径范围的⽂本不会被绘制出来
<svg width="500" height="500">
<defs>
<path id="myPath" d="M 100 100 Q 150 50 200 100" stroke="#adc" fill="none"></path> </defs>
<text>
<textPath xlink:href="#myPath">知道啦</textPath>
</text>
</svg>
三、绘制⽂本
3.1.绘制⽂本标签：text
3.2.绘制⽂本属性：
x/y：绘制位置（默认以⽂字的左下⾓作为参考点）
style:
font-size:⽂字⼤⼩
fill：实⼼⽂字
stroke：空⼼⽂字
text-anchor:⽂字⽔平⽅向的对齐⽅式
start：⽂字最左边同参考点对齐
end：⽂字最右边同参考点对齐
middle：⽂字中间同参考点对齐
dominant-baseline:⽂字垂直⽅向的对齐⽅式
middle：⽂字中间同参考点对齐
text-after-edge：⽂字底部同参考点对齐
text-before-edge：⽂字顶部同参考点对齐
dx：指定当前⽂字同前⼀个⽂字⽔平⽅向的间隙
dy：指定当前⽂字同前⼀个⽂字垂直⽅向的间隙（若后⾯的⽂字没有设置，就会继承前⾯⼀个⽂字的垂直位置）
3.3.绘制多⾏⽂本
<text fill="yellow"><!--可以统⼀设置样式-->
<tspan x="100" y="100" fill="red">gg</tspan><!--可以分别设置样式-->
<tspan x="100" y="150">&</tspan>
<tspan x="100" y="200">jj</tspan>
</text>
四、绘制超链接
可以给任意内容添加超链接, 只需要⽤超链接a标签包裹起来即可
a标签使⽤的属性：
xlink:href: 指定链接地址
xlink:title: 指定链接提⽰
target: 指定打开⽅式
<svg width="500" height="500">
<a xlink:href="链接地址" xlink:title="知道啦" target="_blank">
<!--⽂本添加超链接-->
<text x="50" y="50">知道啦~~~~</text>
<!--圆绘制超链接-->
<circle cx="200" cy="200" r="50" fill="#7fa"></circle>
</a>
</svg>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论