2. svg填充和边框
2019-04-12 本文已影响0人
琉璃_xin
在基础图形部分已经有在使用填充和边框属性,使用的是css的style方式插入到元素中,这里使用定义对象的属性
1.fill
- fill: 填充颜色
- fill-opacity: 透明度
<rect x="10" y="10" width="100" height="100" fill="purple" fill-opacity="0.5"/>
fill
2.stroke
- stroke: 描边颜色
- stroke-width: 描边宽度
- stroke-linecap: 描边终点的形状
butt: 直边结束线段
square: 直边结束线段,稍微超出实际路径的范围,超出的大小由stroke-width控制
round: 圆角,圆角的半径也是由stroke-width控制的 -
stroke-linejoin: 控制两条描边线段之间,用什么方式连接
stroke-linejoin - stroke-dasharray: 虚线类型应用在描边
-
stroke-dashoffset
: 定义虚线开始的位置
3.渐变
必须给渐变内容指定一个id属性,否则文档内的其他元素就不能引用它。为了让渐变能被重复使用,渐变内容需要定义在<defs>标签内部,而不是定义在形状上面
- 线性渐变
要插入一个线性渐变,你需要在SVG文件的defs元素
内部,创建一个<linearGradient>
节点
<defs>
<linearGradient id="linearGradient1">
<stop stop-color="red" offset="0%"/>
<stop stop-color="blue" stop-opacity="0.6" offset="50%"/>
<stop stop-color="green" offset="100%"/>
</linearGradient>
<linearGradient id="linearGradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="black" stop-opacity="0"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<linearGradient id="linearGradient3" x1="0" x2="0" y1="0" y2="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#linearGradient1" />
</defs>
<rect x="10" y="10" width="100" height="100" fill="url(#linearGradient1)" />
<rect x="120" y="10" width="100" height="100" fill="url(#linearGradient2)" />
<rect x="230" y="10" width="100" height="100" fill="url(#linearGradient3)" />
linearGradient
- 径向渐变
<defs>
<radialGradient id="RadialGradient1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<!-- fx和fy 焦点--渐变的中心-->
<radialGradient id="RadialGradient3"
cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="100" height="100" fill="url(#RadialGradient1)" />
<rect x="120" y="10" width="100" height="100" fill="url(#RadialGradient2)" />
<rect x="230" y="10" width="100" height="100" fill="url(#RadialGradient3)" />
radialGradient