在SVG路径上添加效果

Question

我正在创建一个使用SVG和路径的绘图应用程序。我已经做了一支铅笔，但我找不到在上面添加效果的方法。我知道我可以弄乱我的路径的样式属性，但我没有找到任何可以帮助获得我正在寻找的东西的东西。例如，这些效果将很好地具有：

​

​

我现在知道，使用canvas，我可以使用CanvasRenderingContext2D添加阴影和模糊效果，但在SVG中，我没有找到一种“SVGRenderingContext2D”。你能帮我做这个吗？谢谢。

Answer 1

要获得这样的效果，可以组合使用滤镜feTurbulence、feImage、feDisplacementMap来更改其属性

​

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 400 400" preserveAspectRatio="none" >  
	   
 <filter id="displacementFilter">
 <feImage xlink:href="https://i.stack.imgur.com/DycTq.jpg" x="-20%" y="-20%" width="220%" height="220%" preserveAspectRatio="none"></feImage>
    <feTurbulence type="turbulence" baseFrequency="1 1"
        numOctaves="3" result="turbulence" seed="15"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="15" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
  </filter>	   




  <g filter="url(#displacementFilter)"  > 
    <path fill="none" stroke="black" stroke-width="22" 
 d="m26 20c65.1-1.3 140.1-1.3 190 0 14.8 0.4 14.5 19.9 0 20C158.9 40.5 108.2 39.6 25.1 40.9 10.3 41.1 8.8 20.3 26 20Z"/>  
  <line x1="10" x2="400" y1="100" y2="100"   />
 </g> 
 
</svg>

</div>

​

• 通过减小baseFrequency =" 0.2 0.1"的值，我们可以增加颗粒大小。

​

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 400 400" preserveAspectRatio="none" >  
	   
 <filter id="displacementFilter">
 <feImage xlink:href="https://i.stack.imgur.com/DycTq.jpg" x="-20%" y="-20%" width="220%" height="220%" preserveAspectRatio="none"></feImage>
    <feTurbulence type="turbulence" baseFrequency="0.2 0.1"
        numOctaves="3" result="turbulence" seed="15"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="15" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
  </filter>	   




  <g filter="url(#displacementFilter)"  > 
    <path fill="none" stroke="black" stroke-width="22" 
 d="m26 20c65.1-1.3 140.1-1.3 190 0 14.8 0.4 14.5 19.9 0 20C158.9 40.5 108.2 39.6 25.1 40.9 10.3 41.1 8.8 20.3 26 20Z"/>  
  <line x1="10" x2="400" y1="100" y2="100"   />
 </g> 
 
</svg>

</div>

​

通过减小feDisplacementMap滤波器的scale = 5值，我们可以减小波高

​

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 400 400" preserveAspectRatio="none" >  
	   
 <filter id="displacementFilter">
 <feImage xlink:href="https://i.stack.imgur.com/DycTq.jpg" x="-20%" y="-20%" width="220%" height="220%" preserveAspectRatio="none"></feImage>
    <feTurbulence type="turbulence" baseFrequency="0.2 0.1"
        numOctaves="3" result="turbulence" seed="15"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="5" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
  </filter>	   

  <g filter="url(#displacementFilter)"  > 
    <path fill="none" stroke="black" stroke-width="22" 
 d="m26 20c65.1-1.3 140.1-1.3 190 0 14.8 0.4 14.5 19.9 0 20C158.9 40.5 108.2 39.6 25.1 40.9 10.3 41.1 8.8 20.3 26 20Z"/>  
  <line x1="10" x2="400" y1="100" y2="100"   />
 </g> 
 
</svg>

</div>

​

• 您可以通过无休止地更改和组合过滤器属性来进行实验，以获得有趣的效果。

​

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 400 400" preserveAspectRatio="none" >  
	   
 <filter id="displacementFilter">
 <feImage xlink:href="https://i.stack.imgur.com/DycTq.jpg" x="-20%" y="-20%" width="220%" height="220%" preserveAspectRatio="none"></feImage>
    <feTurbulence type="turbulence" baseFrequency="0.2 0.1"
        numOctaves="3" result="turbulence" seed="15"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="75" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
  </filter>	   

  <g filter="url(#displacementFilter)"  > 
    <path fill="none" stroke="black" stroke-width="22" 
 d="m26 20c65.1-1.3 140.1-1.3 190 0 14.8 0.4 14.5 19.9 0 20C158.9 40.5 108.2 39.6 25.1 40.9 10.3 41.1 8.8 20.3 26 20Z"/>  
  <line x1="10" x2="400" y1="100" y2="100"   />
 </g> 
 
</svg>

</div>

​

示例动画

​

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 400 400" preserveAspectRatio="none" >  
	   
 <filter id="displacementFilter">
 <feImage xlink:href="https://i.stack.imgur.com/DycTq.jpg" x="-20%" y="-20%" width="220%" height="220%" preserveAspectRatio="none"></feImage>
    <feTurbulence type="turbulence" baseFrequency="0.2 0.1"
        numOctaves="3" result="turbulence" seed="15"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="5" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
  </filter>	   

  <g filter="url(#displacementFilter)"  > 
    <path stroke-dasharray="450" stroke-dashoffset="450" fill="none" stroke="black" stroke-width="22" 
 d="m26 20c65.1-1.3 140.1-1.3 190 0 14.8 0.4 14.5 19.9 0 20C158.9 40.5 108.2 39.6 25.1 40.9 10.3 41.1 8.8 20.3 26 20Z">
<animate attributeName="stroke-dashoffset" values="450;0" dur="4s" fill="freeze" />
 </path>
  <line x1="10" x2="400" y1="100" y2="100"   />
 </g> 
 
</svg>

</div>

​