spunky1a Posted February 17 Share Posted 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> Link to comment Share on other sites More sharing options...
Ingolme Posted February 18 Share Posted 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%"> Link to comment Share on other sites More sharing options...
spunky1a Posted February 18 Author Share Posted February 18 yes, great, that was it, problem 2 is solved. 👍 Link to comment Share on other sites More sharing options...
Ingolme Posted February 19 Share Posted 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now