Добавление эффектов на пути 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>

• Уменьшая значения scale = 5 фильтра 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="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>

Answer 2

Я обнаружил, что могу использовать SVG-фильтр feTurbulence.Это должно сделать работу:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence