html - 在 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="/image/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="/image/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="/image/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="/image/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="/image/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>