模糊或淡出 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>

Answer 2

当然可以。使用 css3 keyframes，如本教程所示：

https://css-tricks.com/animating-svg-css/

var gs = $('g');
function fade(index) {
  gs.eq(index).css('opacity', Math.random());
  setTimeout(function(){
    fade(++index);
  }, 500);
}
fade(0);

body {
  background:#000;
}
g {
  opacity:0;
  transition:all .5s ease;
}
g:hover {
  opacity:1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg height="480" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" x="10" y="10">
      <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" 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" 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" 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" 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" 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" 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" fill="none" stroke="#ffffff" d="M11,163S599,394,220,338" stroke-width="1"></path>
  </g>
</svg>

更新 现在代码段存在，延迟，在开始时fade，并在:hover上淡入淡出 SVG.希望这就是你要找的。

Answer 3

您可以使用

feGaussianBlur过滤器（就像在笔中所做的那样）和css animation做很多事情。在这支笔中有一个示例，使用不同的滤镜创建景深之类的东西。