Question

如何在svg中实现一个发光的直线，它周围有一些晕。我试过了filter，但它无法在直线上工作。

我在网上搜索了很长时间。但没用。请帮忙或尝试提出一些如何实现这一目标的想法？

＆＃13;

<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>

＆＃13;

我想达到这个效果 the sketch is like this

Answer 1

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

要避免此问题，请使用高度不为零的其他元素。例如，使用精简<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），因为默认值不适用于这样的瘦元素。

Answer 2

现在您可以从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 3

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

我没有使用SVG，只是在HTML和CSS中创建了一行div

如果您不确定，请运行下面的代码段，了解其工作原理。

如果线太宽，只需调整尺寸即可。如果发光太快/太慢，请调整时间例如.3s到1s等。

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

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

希望这有点帮助。

＆＃13;

<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>

＆＃13;

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

3 个答案: