stroke属性
所有stroke属性，可应用于任何种类的线条，文字和元素就像一个圆的轮廓。相关属性有：
- stroke：颜色
<path stroke="red" d="M5 20 l215 0" /> - stroke-width：线宽
<path stroke-width="2" d="M5 20 l215 0" /> - stroke-linecap：线两段的类型（
butt无 /round圆 /square方） <path stroke-linecap="butt" d="M5 20 l215 0" />` - stroke-dasharray：用于创建虚线（通过数字大小）
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
SVG滤镜
SVG滤镜被用来增加SVG图形的特殊效果。
语法：我们通过<filter>标签使用滤镜，注意id属性是必不可少的
可用的滤镜有：
- feBlend：与图像相结合的滤镜
- feColorMatrix：用于彩色滤光片转换
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset：过滤阴影
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight：用于照明过滤
- fePointLight：用于照明过滤
- feSpotLight：用于照明过滤
注意：可以在一个svg元素上同时使用多个滤镜
注意：IE和Safari不支持SVG滤镜！
模糊效果 feGaussianBlur实例
<filter>元素id属性定义一个滤镜
<feGaussianBlur>元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
<rect>元素的滤镜属性用来把元素链接到"f1"滤镜
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- 定义滤镜 -->
<defs>
<filter id="filter-1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<!-- 使用滤镜 -->
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#filter-1)" />
</svg>
阴影 feOffset + feBlend实例
feOffset + feBlend两个元素合作创建 "阴影" 效果。
- feOffset：负责定义位移
- feBlend：负责样式。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- 定义阴影 -->
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="30" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<!-- 使用阴影 -->
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
image.png
线性渐变 <linearGradient>
-
y1==y2且x1!=x2：水平渐变 -
x1==x2且y1!=y2：垂直渐变 -
x1!=x2且y1!=y2： 角形渐变
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
SVG</text>
</svg>
放射性渐变 <radialGradient>
-
cx，cy和r属性定义的最外层圆 -
fx和fy定义的最内层圆 - 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个
<stop>标签指定 - offset属性用来定义渐变色开始和结束
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>```