给svg添加阴影

标签：svg 阴影 filter 添加 标签 path

          <svg>
            <defs>
              <filter id="shadow" x="0" y="0" width="70" height="70">
                <!-- 偏移量 -->
                <feOffset in="SourceAlpha" dx="30" dy="20" result="offset"></feOffset>
                <!-- 阴影 -->
                <feBlend in="SourceGraphic"></feBlend>
                <!-- 模糊 -->
                <feGaussianBlur in="offset" stdDeviation="36" result="blur"></feGaussianBlur>
                <!-- 颜色调整 -->
                <feComponentTransfer in="blur" result="shadow">
                  <feFuncR type="linear" slope="0.2"></feFuncR>
                  <feFuncG type="linear" slope="0.2"></feFuncG>
                  <feFuncB type="linear" slope="0.2"></feFuncB>
                </feComponentTransfer>

 　　　　　　　　　　<!-- 不透明度调整 -->                 　<feComposite                  　in="shadow"                  　in2="SourceGraphic"                 　　operator="arithmetic"                 　　k1="0"                 　　k2="1"                　　 k3="1"                　  k4="0"               　　></feComposite>  

              </filter>
            </defs>
            <path filter="url(#shadow)" ></path>
          </svg>

 这坨代码添加到svg标签中

　　　　　　<defs>
              <filter id="shadow" x="0" y="0" width="70" height="70">
                <!-- 偏移量 -->
                <feOffset in="SourceAlpha" dx="30" dy="20" result="offset"></feOffset>
                <!-- 阴影 -->
                <feBlend in="SourceGraphic"></feBlend>
                <!-- 模糊 -->
                <feGaussianBlur in="offset" stdDeviation="36" result="blur"></feGaussianBlur>
                <!-- 颜色调整 -->
                <feComponentTransfer in="blur" result="shadow">
                  <feFuncR type="linear" slope="0.2"></feFuncR>
                  <feFuncG type="linear" slope="0.2"></feFuncG>
                  <feFuncB type="linear" slope="0.2"></feFuncB>
                </feComponentTransfer>
              </filter>

 　　　　　　　　<!-- 不透明度调整 -->                 　　　　<feComposite                  　　　　 in="shadow"                  　　　　 in2="SourceGraphic"                 　　　　  operator="arithmetic"                 　　　　  k1="0"                 　　　　  k2="1"                　　　　   k3="1"                　　　　   k4="0"               　　　　  ></feComposite>

            </defs>

<path filter="url(#shadow)" ></path>
path 中的 filter 这个就填filter 标签中的 id     #shadow

 

标签：svg,阴影,filter,添加,标签,path
From： https://www.cnblogs.com/FuGui-Wang/p/18524565