SVG lines: no glowing effect on horizontal or vertical lines, why?

spunky1a · February 17

Hello,

1. I want to create an SVG line with flowing and glowing effect. This also works for path lines, but not for horizontal or vertical lines. As soon as I add the filter (filter: url(#glow)") in the last two lines, the lines are no longer displayed.
Why?

2. The green arc is not displayed correctly, it is cut off at the top and bottom, how can I change that?

3. Does anyone have a different or better idea for a flowing and glowing effect?

Thanks.

<html style="margin: 0; background: #000;"><body>
<svg viewBox="0 0 600 600" stroke-linecap="round" fill-opacity="0">
    <defs>
        <filter id="glow">
            <fegaussianblur class="blur" result="coloredBlur" stddeviation="5"></fegaussianblur>
            <femerge>
                <femergenode in="coloredBlur"></femergenode>
                <femergenode in="coloredBlur"></femergenode>
                <femergenode in="coloredBlur"></femergenode>
                <femergenode in="SourceGraphic"></femergenode>
            </femerge>
        </filter>
    </defs>

    /* bogen */
    <g class="svgWrapper" transform="translate(300,100)">
        <path class="exampleGlow" d="M100,250 C100,100 400,100 400,250" style="stroke-width: 15; stroke: #080; stroke-dasharray: 0; stroke-dashoffset: 100; filter: url(#glow);" transform="translate(-250,-200)"/>
	</g>
	<g class="svgWrapper" transform="translate(300,100)">
        <path class="exampleGlow" d="M100,250 C100,100 400,100 400,250" style="stroke-width: 8; stroke: #0f0; stroke-dasharray: 50 50; stroke-dashoffset: 100; filter: url(#glow); animation: move 1.0s linear infinite; box-shadow: 0px;" transform="translate(-250,-200)"/>
	</g>

    /* sinus */
    <g class="svgWrapper" transform="translate(300,275)">
        <path class="exampleGlow" d="M100,250 C200,0 300,500 400,250" style="stroke-width: 15; stroke: #800; stroke-dasharray: 0; stroke-dashoffset: 100; filter: url(#glow)" transform="translate(-250,-200)"/>
	</g>
	<g class="svgWrapper" transform="translate(300,275)">
        <path class="exampleGlow" d="M100,250 C200,0 300,500 400,250" style="stroke-width: 8; stroke: #f00; stroke-dasharray: 50 50; stroke-dashoffset: 100; filter: url(#glow); animation: move 0.7s linear infinite; box-shadow: 0px;" transform="translate(-250,-200)"/>
	</g>

    /* diagonal */
    <g class="svgWrapper" transform="translate(160,50)">
        <path class="exampleGlow" d="M50,50 L250,250" style="stroke-width: 15; stroke: #088; stroke-dasharray: 0; stroke-dashoffset: 100; filter: url(#glow)"/>
	</g>
	<g class="svgWrapper" transform="translate(160,50)">
        <path class="exampleGlow" d="M50,50 L250,250" style="stroke-width: 8; stroke: #0ff; stroke-dasharray: 45 55; stroke-dashoffset: 100; filter: url(#glow); animation: move 1.3s linear infinite; box-shadow: 0px;"/>
	</g>

    /* horizontal */
    <g class="svgWrapper" transform="translate(300,400)">
        <path class="exampleGlow" d="M100,250 H400" style="stroke-width: 15; stroke: #008; stroke-dasharray: 0; stroke-dashoffset: 100" transform="translate(-250,-200)"/>
	</g>
	<g class="svgWrapper">
        <path class="exampleGlow" d="M150,450 H450" style="stroke-width: 8; stroke: #00f; stroke-dasharray: 75 25; stroke-dashoffset: 100; animation: move 2.0s linear infinite; box-shadow: 0px;"/>
	</g>

    /* vertikal */
    <g class="svgWrapper" transform="translate(30,0)">
        <path class="exampleGlow" d="M50,50 V400" style="stroke-width: 15; stroke: #880; stroke-dasharray: 0; stroke-dashoffset: 100;"/>
	</g>
	<g class="svgWrapper" transform="translate(30,0)">
        <path class="exampleGlow" d="M50,50 V400" style="stroke-width: 8; stroke: #ff0; stroke-dasharray: 25 75; stroke-dashoffset: 100; animation: move .5s linear infinite; box-shadow: 0px;"/>
	</g>

</svg>

</body>
</html>

Ingolme · February 18

It took a bit of research but I found that filters have a hidden bounding box. You can make this box larger by setting the x, y, width and height values.

<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">

spunky1a · February 18

yes, great, that was it, problem 2 is solved. 👍

Ingolme · February 19

I looked into it again. More bounding box issues. In the case of the vertical line, the box is invisible because 200% of 0 pixels is still 0 pixels. Instead of percentage sizes I tried to use pixels but I can't seem to get pixel values to work for the filter bounding box, so the best solution I can find is to force the path to draw on a larger canvas by drawing something extra out of view. Adding "m600,600 l1,1" to the paths worked.

I just tested drawing a vertical line in Inkscape SVG editor to see how they handle it and it's broken there too. There really seems to be no other solution but to make the drawing cover a larger surface area.

For your third question, it's a subjective thing. If you're satisfied with how it looks then this is fine, if not then maybe you can specify what's missing.

Sign In

SVG lines: no glowing effect on horizontal or vertical lines, why?

Recommended Posts

spunky1a

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

spunky1a

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity