How to achieve a glowing straight line in svg

Question

How to achieve a glowing straight line in svg，that some halo around it. I have tried filter, but it couldn't work on the straight line.

I am searching for a long time on net. But no use. Please help or try to give some ideas how to achieve this?

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

I want to achieve this effect the sketch is like this

Your question is very complicated to understand correctly. Try this code if it is helpful for you — Saurav Jamwal, Jun 23 '17 at 07:38

score 1 · Accepted Answer · answered Jun 23 '17 at 11:26

Since your path is completely horizontal, it has zero height. The width of the line does not matter. If the width or the height of an element is zero, the filter will not work.

To avoid this problem, use an different element that has a non-zero height. For example, use a thin <rect> instead of a <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>

Also, as you can see in my example, you may also have to manually adjust the filter region (x, y, width, height, and filterUnits), because the default values won't work well for such a thin element.

Or just use userSpaceOnUse units for the filter since they work with 0 height/width elements. — Robert Longson, Jun 23 '17 at 11:44
Yes. But may result in a slow filter if you just use the default filter region values, and the SVG is large. — Paul LeBeau, Jun 23 '17 at 12:10

score 0 · Answer 2 · answered Jun 23 '17 at 07:53

One way to make a div glow would be to use a CSS animation function. This is an easy alternative rather than manipulating an SVG.

I didn't use an SVG but instead just a made a div a line in HTML and CSS

Run the code snippet below to see how this works if you're unsure.

If the line is too wide, just adjust the size. If the glowing is too fast/slow, adjust the timing.
e.g. .3s to 1s etc.

If you want to adjust the glowing effect spread, or feathering, or color, just play with the box-shadow settings.

Here is a great and lengthy article about how to manipulate SVGs and such. https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/

Hope this was somewhat helpful.

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

Thank you for your answer and code.But it has to use svg because the glow css div can't work together with other parts in my project. — cyhone, Jun 23 '17 at 08:00
Just curious, but why won't CSS animations work with your project? — jaguarj, Jun 23 '17 at 08:04
My project is to paint a very complicated circuit diagram, we use svg.js to paint every line, and the glowing effect is a dangerous sign of line. Because css is hard to paint the diagram, box-shadow won't be a choice. — cyhone, Jun 23 '17 at 08:15

score -1 · Answer 3 · answered Jun 23 '17 at 07:42

-1

Now you can create straight line from SVG. and set also thickness of straight line

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

answered Jun 23 '17 at 07:42

Bheem Raj Gupta

3
1

1

Thank you for your answer.But I want to achieve a glowing line that some halo around it. – cyhone Jun 23 '17 at 07:53
so you are downvoting me – Bheem Raj Gupta Jul 05 '17 at 12:34

How to achieve a glowing straight line in svg

3 Answers3