是否可以模糊或淡出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>
答案 0 :(得分：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。希望你正在寻找。
答案 1 :(得分：1)
这是一种通过在SVG过滤器中滥用笔触 - 虚线 - 数组和不透明度操作来破解沿路径的渐进模糊的方法。基本上，你仔细构建一个增加空间的笔划虚线阵列，然后使用大模糊来填补空白＆＃34;。然后使用组件传输增强不透明度，然后使用原始图形来屏蔽溢出。请注意，您必须首先以白色（或背景颜色）绘制路径，然后在其上绘制笔划虚线路径，以便正确选择合成。对于一般解决方案，您需要使用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>
答案 2 :(得分：0)
您可以使用feGaussianBlur过滤器（就像在笔中所做的那样）和css animation来做很多事情。在this pen中有一个示例，使用不同的过滤器创建类似景深的内容。