是否可能模糊或淡出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

当然你可以..使用像本教程中的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 2

这是一种通过在SVG过滤器中滥用笔划 - 虚线 - 数组和不透明度操纵来破解沿路径的渐进模糊的方法。 基本上，你仔细构建一个增加空间的笔划虚线阵列，然后使用大模糊来“填补空白”。 然后使用组件传输增强不透明度，然后使用原始图形来屏蔽溢出。 请注意，您必须首先以白色（或背景颜色）绘制路径，然后在其上绘制笔划虚线路径，以便正确选择合成。 对于一般解决方案，您需要使用JavaScript构造stroke-dash数组和过滤器，因为它和您要使用的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 3

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