是否可以模糊或淡出 SVG 路径？

Question

是否可以模糊或淡出 SVG 路径？我有一堆线条，理想情况下我希望在开头或结尾（即仅在一侧）淡出，或者至少模糊它们，这样看起来一半比另一半更清晰。

如果不可能，我怎样才能改变 SVG 以使其成为可能？

var bodyElement = document.querySelector("body");
bodyElement.addEventListener("mousemove", getMouseDirection, false);

var xDirection = "";
var yDirection = "";

var oldX = 0;
var oldY = 0;

function getMouseDirection(e) {
  if (oldX < e.pageX) {
    xDirection = "right";
  } else {
    xDirection = "left";
  }
  if (oldY < e.pageY) {
    yDirection = "down";
  } else {
    yDirection = "up";
  }
  oldX = e.pageX;
  oldY = e.pageY;
}

var tl;

$('g')
.on('mouseover', function() {
  tl = new TimelineLite();
  if (yDirection === "down") {
    tl.to($(this), 1, {
      y: 10
    });
  }
  if (yDirection === "up") {
    tl.to($(this), 1, {
      y: -10
    });
  }
})
.on('mouseout', function() {
  tl = new TimelineLite();
  tl.to($(this), 1, {
    y: 0,
    x: 0
  });
});

body {
  background: #000;
}

.f0 {
  filter: url(#f0);
  animation-delay: .5s;
}

.f1 {
  filter: url(#f1);
  animation-delay: 1s;
}

.f2 {
  filter: url(#f2);
  animation-delay: 2s;
}

.f3 {
  filter: url(#f3);
  animation-delay: 3s;
}

.line {
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

<svg height="480" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
    <filter id="f1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <filter id="f2">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7" />
    </filter>
    <filter id="f3">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <g>
    <path class="hitbox" fill="none" stroke="transparent" d="M11,163S538,357,192,108" stroke-width="5"></path>
    <path class="line" fill="none" stroke="#ffffff" d="M11,163S538,357,192,108" stroke-width="1"></path>
  </g>
  <g>
    <path class="hitbox" fill="none" stroke="transparent" d="M11,163S626,299,507,115" stroke-width="5"></path>
    <path class="line f1" fill="none" stroke="#ffffff" d="M11,163S626,299,507,115" stroke-width="1"></path>
  </g>
  <g>
    <path class="hitbox" fill="none" stroke="transparent" d="M11,163S620,182,612,189" stroke-width="5"></path>
    <path class="line f2" fill="none" stroke="#ffffff" d="M11,163S620,182,612,189" stroke-width="1"></path>
  </g>
  <g>
    <path class="hitbox" fill="none" stroke="transparent" d="M11,163S55,480,558,56" stroke-width="5"></path>
    <path class="line f2" fill="none" stroke="#ffffff" d="M11,163S55,480,558,56" stroke-width="1"></path>
  </g>
  <g>
    <path class="hitbox" fill="none" stroke="transparent" d="M11,163S654,86,533,328" stroke-width="5"></path>
    <path class="line f1" fill="none" stroke="#ffffff" d="M11,163S654,86,533,328" stroke-width="1"></path>
  </g>
  <g>
    <path class="hitbox" fill="none" stroke="transparent" d="M11,163S397,248,466,162" stroke-width="5"></path>
    <path class="line f3" fill="none" stroke="#ffffff" d="M11,163S397,248,466,162" stroke-width="1"></path>
  </g>
  <g>
    <path class="hitbox" fill="none" stroke="transparent" d="M11,163S651,181,569,111" stroke-width="5"></path>
    <path class="line f3" fill="none" stroke="#ffffff" d="M11,163S651,181,569,111" stroke-width="1"></path>
  </g>
  <g>
    <path class="hitbox" fill="none" stroke="transparent" d="M11,163S599,394,220,338" stroke-width="5"></path>
    <path class="line f0" fill="none" stroke="#ffffff" d="M11,163S599,394,220,338" stroke-width="1"></path>
  </g>
</svg>

http://codepen.io/anon/pen/rxKvMj

Answer 1

这是一种通过在 SVG 过滤器中滥用笔画破折号数组和不透明度操作来沿路径实现渐进式模糊的方法。基本上，您仔细构建一个由不断增加的空间组成的笔划破折号数组，然后使用大模糊来“填充间隙”。然后，您使用组件传输来提高不透明度，然后使用原始图形来掩盖溢出。请注意，您必须首先用白色（或背景颜色）绘制路径，然后在其上绘制虚线路径，以便您有正确的合成选择。对于一般解决方案，您需要使用 JavaScript 构建笔画破折号数组和过滤器，因为它和您要使用的 stdDeviation 将取决于路径长度。

<svg width="800px" height="600px" color-interpolation-filters="sRGB" viewBox="0 0 1600 1200">
  <defs>
    <filter id="fade-out">
      
      <feGaussianBlur in="SourceGraphic" stdDeviation="16" result="blur-source"/>
    
      <feComponentTransfer result="fader">
        <feFuncA type="gamma" exponent=".5" amplitude="2"/>
      </feComponentTransfer>
          
      <feComposite operator="in" in="fader" in2="SourceGraphic"/>    
  
    </filter>
  </defs>

<g filter="url(#fade-out)">
   <path d="M200,300 Q400,50 600,300 T1000,300" stroke-width="5" fill="none" stroke="white"/> 
  
  <path d="M200,300 Q400,50 600,300 T1000,300"
        fill="none" stroke="red" stroke-width="5" stroke-dasharray="10,1,8,3,8,5,7,7,7,9,6,11,6,13,5,15,5,17,5,19,5,21,5,23,5,25,5,27,5,29,5"/> 
  </g>
</svg>