SVG 特殊效果

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>```