如何在svg中实现一条发光的直线

Question

如何在svg中实现一条发光的直线，周围有一些光晕。我试过filter，但在直线上行不通。

我在网上找了很久。但是没有用。请帮助或尝试提供一些想法如何实现这一目标？

<svg width="100%" height="100%" version="1.2" xmlns="http://www.w3.org/2000/svg">
    <defs>
    <filter id="dangerShine">
    <feColorMatrix type="matrix" 
    result="color" 
    values="1 0 0 0 0
            0 0 0 0 0
            0 0 0 0 0
            0 0 0 1 0">
            </feColorMatrix>
            <feGaussianBlur in="color" stdDeviation="4" result="blur"></feGaussianBlur>
            <feOffset in="blur" dx="0" dy="0" result="offset"></feOffset>
            <feMerge>
            <feMergeNode in="bg"></feMergeNode>
            <feMergeNode in="offset"></feMergeNode>
            <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
    </filter>
    </defs>
    <path d="M2 120 H 100" stroke="black" filter="url(#dangerShine)"/>
    </svg>

我想实现这个效果 the sketch is like this

Answer 1

现在您可以从 SVG 创建直线。并设置直线的粗细

<html>
<body>
<svg height="500" width="500">`enter code here`
  <line x1="100" y1="100" x2="200" y2="100" style="stroke:rgb(111,0,0);stroke-width:5" />
</svg>
</body>
</html>

Answer 2

制作 div 发光的一种方法是使用 CSS 动画函数 。这是一个简单的替代方法，而不是操纵 SVG。

我没有使用 SVG，而是在 HTML 和 CSS[=12 中做了一个 div 一行=]

运行如果您不确定，请查看下面的代码片段，看看它是如何工作的。

如果线条太宽，调整大小即可。如果太亮fast/slow，请调整时间。
例如.3s 到 1s 等

如果您想调整发光效果扩散、羽化或颜色，只需使用 box-shadow 设置即可。

这是一篇关于如何操作 SVG 等的精彩而冗长的文章。 https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/

希望这对您有所帮助。

<style>

body {
  margin: 0;
}

/*

The circle is here just to
show the transparency of the
glowing line.

*/
.circle {
 width: 200px;
 height: 200px;
 border-radius: 50%;
 background: orange;
}

.line {
 position: relative;
 top: -100px;
 width: 100vw;
 height: 3px;
 background: red;
 animation: glow .3s infinite alternate ease-in-out;
}

@keyframes glow {
    from {box-shadow: 0px;}
    to {box-shadow: 0px 0px 20px rgba(255, 0, 0, 1);}
}

</style>

</head>
    <body>

    <div class="circle">

    </div>

    <div class="line">

    </div>

    <script></script>
    </body>
</html>

Answer 3

由于您的路径是完全水平的，因此它的高度为零。线的宽度无关紧要。如果元素的宽度或高度为零，过滤器将不起作用。

为避免此问题，请使用具有非零高度的不同元素。例如，使用细 <rect> 而不是 <path>.

<svg width="100%" height="100%" version="1.2" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="dangerShine" filterUnits="userSpaceOnUse"
                x="-10" y="110" width="120" height="20">
            <feColorMatrix type="matrix" 
                           result="color" 
                           values="1 0 0 0 0
                                   0 0 0 0 0
                                   0 0 0 0 0
                                   0 0 0 1 0"/>
            <feGaussianBlur in="color" stdDeviation="4" result="blur"/>
            <feOffset in="blur" dx="0" dy="0" result="offset"/>
            <feMerge>
                <feMergeNode in="bg"></feMergeNode>
                <feMergeNode in="offset"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
    <rect x="2" y="120" width="100" height="1" fill="black" filter="url(#dangerShine)"/>
</svg>

此外，正如您在我的示例中所见，您可能还必须手动调整 filter region (x、y、width、height, 和 filterUnits), 因为默认值不适用于这样的薄元素。

如何在svg中实现一条发光的直线

How to achieve a glowing straight line in svg

javascript

css

svg

svg.js