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
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.
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>
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>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
The community reviewed whether to reopen this question 5 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I need to implement this as doughnut chart - I looked around for css/svg/canvas solutions but couldn't find any reliable way of doing it.
I know I could have fully rounded corners of each segment, but that's not what I'm looking for.
I would use this answer combined with this one
.palette {
--g:20px; /* The gap between shapes*/
--s:50px; /* the size*/
height: 300px;
width: 300px;
position:relative;
display:inline-block;
overflow:hidden;
filter: url('#goo');
}
.palette > * {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:var(--s) solid var(--c,red);
border-radius:50%;
clip-path:polygon(
calc(50% + var(--g)/2) 50%,
calc(50% + var(--g)/2) 0%,
100% 0%,
100% calc(33.745% - var(--g)/2),
50% calc(50% - var(--g)/2));
}
.color1 {
transform:rotate(72deg);
--c:blue;
}
.color2 {
transform:rotate(144deg);
--c:orange;
}
.color3 {
transform:rotate(-72deg);
--c:green;
}
.color4 {
transform:rotate(-144deg);
--c:purple;
}
<div class="palette">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
<div class="color5"></div>
</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
That filter can also be applied to SVG stroked paths:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 20 60 60">
<defs>
<filter id="round">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="round1" />
<feColorMatrix in="round1" mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -14" result="round2"/>
<feComposite in="SourceGraphic" in2="round2" operator="atop"/>
</filter>
</defs>
<style>
path{
fill:none;
stroke-width:9;
}
</style>
<path stroke-dasharray="70 230" stroke-dashoffset="94" value="70" stroke="blue"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
<path stroke-dasharray="55 245" stroke-dashoffset="173" value="55" stroke="gold"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
<path stroke-dasharray="45 255" stroke-dashoffset="242" value="45" stroke="purple"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
<path stroke-dasharray="30 270" stroke-dashoffset="296" value="30" stroke="red"
filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
></path>
</svg>
<style> svg{ width:180px; background:lightgreen } </style>
I am trying to get an svg to follow a path. But the svg circle just stays in one place and does not follow the path.
.LineSvg {
fill: none;
stroke: $blue;
position: absolute;
margin-top: -2px;
left: 700px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="0 0 1167.85 841.719" className={styles.LineSvg}>
<path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" transform="translate(4767.054 2827.456)" />
<circle cx="123.2" cy="646" r="11.7" fill="#63c6be" >
<animateMotion
dur="2.2s"
/>
<mpath xlinkHref="#wire"></mpath>
<animateMotion />
</circle>
</svg>
It should start at the beginning of the path (line) and move to the top of the line.
There are a number of syntactical errors in the markup that prevent animation. When these are fixed the animation takes place off the screen because the path's transform is ignored by the mpath element.
The syntax is fixed below and I've adjusted the viewBox so the animation is visible.
I've removed the non-functional transform on the path element.
I've also added a fill="freeze" otherwise the circle disappears at the end as the path's displacement is so large.
Finally I've made the circle bigger so you can still see it in the larger viewBox.
.LineSvg{
fill: none;
stroke: $blue;
position: absolute;
margin-top: -2px;
left: 700px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="-5000 -3000 5000 5000" className={styles.LineSvg} >
<path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" />
<circle cx="123.2" cy="646" r="111.7" fill="#63c6be" >
<animateMotion
dur="2.2s" fill="freeze"
>
<mpath xlink:href="#wire"></mpath>
</animateMotion>
</circle>
</svg>
Simple demo of bug here: https://codepen.io/mknepprath/pen/mKeObo
Open in Chrome to see how it should look.
Issues:
In Safari, the filter seems to not apply or only apply partially...
it's different.
In Firefox, nothing shows up at all - it seems to
hide the filter and the div that the filter is applied to.
How do I get this to work consistently across browsers?
html:
<svg class='a'>
<defs>
<filter id='hey'>
<feColorMatrix
type='matrix'
result='darken'
x='0'
y='0'
width='200px'
height='100px'
values='.2 .05 .05 0 .35
.05 .2 .05 0 .35
.05 .05 .2 0 .35
0 0 0 1 0'
/>
<feColorMatrix
type='matrix'
result='node'
x='0'
y='0'
width='200px'
height='100px'
values='1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0'
/>
<feMerge>
<feMergeNode in='darken' />
<feMergeNode in='node' />
</feMerge>
</filter>
</defs>
</svg>
<div class='b' style='filter: url(#hey)'></div>
css:
.a {
display: none;
}
.b {
width: 200px;
height: 100px;
background: peachpuff;
}
Chrome accepts bad syntax and tries to make the best of it, Firefox generally does not.
Using display:none takes the SVG out of the DOM so the CSS can't find the style anymore. Make the SVG zero sized, put it below your content or use visbility: hidden
In SVG 1.1 at least, you shouldn't' be able to use "px", "em" etc. to dimension your filter elements. (And there should be no need to size your feColorMatrixes - sizes are autocalculated by default.)
.a {
width: 0;
height: 0;
}
.b {
width: 200px;
height: 100px;
background: peachpuff;
}
<svg class="a">
<defs>
<filter id="hey">
<feColorMatrix
type="matrix"
result="darken"
values=".2 .05 .05 0 .35
.05 .2 .05 0 .35
.05 .05 .2 0 .35
0 0 0 1 0"
/>
<feColorMatrix
type="matrix"
result="node"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0"
/>
<feMerge>
<feMergeNode in="darken" />
<feMergeNode in="node" />
</feMerge>
</filter>
</defs>
</svg>
<div class="b" style="filter: url(#hey)"></div>
I need some help about svg's. There is a "background image". Another "image" is laid over it. The "image" has to have a hole cut out of it so that the background image is shining through. I achieved this by using svg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
body{
background-repeat: no-repeat;
background-size: cover;
}
#svg-door {
background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
background-size: cover;
box-sizing: border-box;
padding: 100px;
width: 100%;
height: 500px;
}
#wood {
border-radius: 50%;
}
</style>
</head>
<body background="https://www.w3schools.com/css/img_fjords.jpg" >
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
<image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
</pattern>
</defs>
<path xmlns="http://www.w3.org/2000/svg" d=" M0,0 225,0 225,300 0,300 z M105,50, 180,50 180,80 105,80 z "
fill="url(#wood)" fill-rule="evenodd"/>
</svg>
</body>
I could not use mask filters of css cause of browser compatibility. I dont want to use a svg/js framework.
So far so good. Now i want to go a step further.
I want this hole to have a transparent gradient. So that the inner rects borders are not that hard as in current version. I dont know how to do it.
Furthermore i want to animate this hole to get bigger over time. I would do it by using js. Is there another way? Maybe by changing the whole structure of html?
Any help is appreciated.
Firstly, there should be no issue with masks applied to SVG elements. There are some browser compatibility related to SVG masks being applied to HTML elements, but not when they are applied to SVG elements.
In fact a mask is the obvious solution to your issue. To get the soft edges to the hole, we'll apply a blur filter to a rectangle, then use that as a mask to create the hole.
body{
background-repeat: no-repeat;
background-size: cover;
}
#svg-door {
background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
background-size: cover;
box-sizing: border-box;
padding: 100px;
width: 100%;
height: 500px;
}
#wood {
border-radius: 50%;
}
<
<body background="https://www.w3schools.com/css/img_fjords.jpg" >
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
<image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
</pattern>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<path d="M105,50, 180,50 180,80 105,80 z" filter="url(#hole-blur)"/>
</mask>
<filter id="hole-blur">
<feGaussianBlur stdDeviation="2"/>
</filter>
</defs>
<path d="M0,0 225,0 225,300 0,300 z" fill="url(#wood)" mask="url(#hole)"/>
</svg>
</body>
I am using an SVG/Path to generate a large upward pointing triangle...see the related link below for some background info.
Background Info
What I am trying to do is add an inset, blurred shadow (simiar to box-shadow) on two sides of the triangle (top-left and top-right), but not the base of the triangle. Also trying to taper the shadow so that it does not touch the base of the triangle. The following link is screenshot with a rough, but not exact, idea of what I am looking to do.
Shadow Example
Here is the code I have so far:
svg#bigTriangleColor {
pointer-events: none; background: red;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #EEEEEE;
stroke: #EEEEEE;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>
Thanks in advance, any help is greatly apprecizted...
Add a grey shape behind the triangle to represent the shadow. Then blur it.
<svg width="100%" height="100" viewBox="0 0 600 100" preserveAspectRatio="none">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</defs>
<polygon points="0,0, 600,0, 600,80, 300,20, 0,80" fill="#999" filter="url(#blur)"/>
<polygon points="0,0, 600,0, 600,65, 300,20, 0,65" fill="black"/>
</svg>