Add shadow to an SVG element, such as line - html

Question

So I'm pretty new to SVG but I started playing with a graph. The graph is from here. I've been searching for hours and did only find a half solution to my problem. As you see from the code snippet, if you hover on the graph it "glows". But I want that only the circles and the "joints" would glow when I'm hovering on them.
What I tried:
Using regular CSS shadowing
Using the code that makes "glow" the graph, but only on g elements.
Creating a separate SVG both: a) in the main SVG b) separately, and
mixing them with position: absolute. (after this the positioning
worked weirdly)
What should I do to make only the circles and the joints "glow"?
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body{
height: 100%;
width: 100%;
}
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
body {
font-family: 'Roboto Mono', monospace;
}
.graph .labels.x-labels {
text-anchor: middle;
}
.graph .labels.y-labels {
text-anchor: end;
}
.graph {
height: 500px;
width: 800px;
}
.graph .grid {
stroke: #ccc;
stroke-dasharray: 0;
stroke-width: 3;
}
.labels {
font-size: 17px;
font-weight: 400;
}
.label-title {
font-weight: 500;
text-transform: uppercase;
font-size: 15px;
fill: black;
}
.data {
fill: #f86d36;
stroke-width: 1;
}
.graph .dot-joints {
stroke: #f86d36;
stroke-dasharray: 0;
stroke-width: 3;
}
svg:hover {
-webkit-filter: drop-shadow(0px 0px 4px #f86d36e8);
filter: drop-shadow(0px 0px 4px #f86d36e8);
}
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph"
aria-labelledby="title" role="img">
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="705" y1="370" y2="370"></line>
</g>
<g class="labels x-labels"><text x="100" y="400">2008</text><text x="246" y="400">2009</text><text x="392"
y="400">2010</text><text x="538" y="400">2011</text><text x="694" y="400">2012</text><text x="400" y="440"
class="label-title">Year</text></g>
<g class="labels x-labels"><text x="70" y="15">15</text><text x="70" y="131">10</text><text x="70"
y="248">5</text><text x="70" y="373">0</text><text x="35" y="200" class="label-title">Price</text></g>
<g class="data" data-setname="Our first data set">
<circle cx="95" cy="192" data-value="7.2" r="5"></circle>
<circle cx="240" cy="141" data-value="8.1" r="5"></circle>
<circle cx="388" cy="179" data-value="7.7" r="5"></circle>
<circle cx="531" cy="200" data-value="6.8" r="5"></circle>
<circle cx="677" cy="104" data-value="6.7" r="5"></circle>
</g>
<g class="dot-joints x-grid">
<line x1="95" x2="240" y1="192" y2="141"></line>
<line x1="240" x2="388" y1="141" y2="179"></line>
<line x1="388" x2="531" y1="179" y2="200"></line>
<line x1="531" x2="677" y1="200" y2="104"></line>
</g>
</svg>

Answer 1

I hope this is what you need: I'm using an svg filter for the shadow.
To your code I've added .data circle:hover{filter:url(#f)}for the individual circles and .dot-joints.x-grid:hover{filter:url(#f)} for the group of lines:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body{
height: 100%;
width: 100%;
}
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
body {
font-family: 'Roboto Mono', monospace;
}
.graph .labels.x-labels {
text-anchor: middle;
}
.graph .labels.y-labels {
text-anchor: end;
}
.graph {
height: 500px;
width: 800px;
}
.graph .grid {
stroke: #ccc;
stroke-dasharray: 0;
stroke-width: 3;
}
.labels {
font-size: 17px;
font-weight: 400;
}
.label-title {
font-weight: 500;
text-transform: uppercase;
font-size: 15px;
fill: black;
}
.data {
fill: #f86d36;
stroke-width: 1;
}
.data circle:hover{filter:url(#f)}
.graph .dot-joints {
stroke: #f86d36;
stroke-dasharray: 0;
stroke-width: 3;
}
.dot-joints.x-grid:hover{filter:url(#f)}
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph"
aria-labelledby="title" role="img">
<defs>
<filter id="f" filterUnits="userSpaceOnUse" id="shadow" x="-10" y="-150" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="3" dy="1" result="shadow"></feOffset>
<feFlood flood-color="rgba(0,0,0,.52)" result="color" />
<feComposite in ="color" in2="shadow" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="705" y1="370" y2="370"></line>
</g>
<g class="labels x-labels"><text x="100" y="400">2008</text><text x="246" y="400">2009</text><text x="392"
y="400">2010</text><text x="538" y="400">2011</text><text x="694" y="400">2012</text><text x="400" y="440"
class="label-title">Year</text></g>
<g class="labels x-labels"><text x="70" y="15">15</text><text x="70" y="131">10</text><text x="70"
y="248">5</text><text x="70" y="373">0</text><text x="35" y="200" class="label-title">Price</text></g>
<g class="data" data-setname="Our first data set">
<circle cx="95" cy="192" data-value="7.2" r="5"></circle>
<circle cx="240" cy="141" data-value="8.1" r="5"></circle>
<circle cx="388" cy="179" data-value="7.7" r="5"></circle>
<circle cx="531" cy="200" data-value="6.8" r="5"></circle>
<circle cx="677" cy="104" data-value="6.7" r="5"></circle>
</g>
<g class="dot-joints x-grid" >
<line x1="95" x2="240" y1="192" y2="141"></line>
<line x1="240" x2="388" y1="141" y2="179"></line>
<line x1="388" x2="531" y1="179" y2="200"></line>
<line x1="531" x2="677" y1="200" y2="104"></line>
</g>
</svg>
Alternatively you may want this instead:
svg:hover .data,
svg:hover .dot-joints.x-grid{filter:url(#f)}
When hovering the svg element apply shadow to the lines and circles.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body{
height: 100%;
width: 100%;
}
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
body {
font-family: 'Roboto Mono', monospace;
}
.graph .labels.x-labels {
text-anchor: middle;
}
.graph .labels.y-labels {
text-anchor: end;
}
.graph {
height: 500px;
width: 800px;
}
.graph .grid {
stroke: #ccc;
stroke-dasharray: 0;
stroke-width: 3;
}
.labels {
font-size: 17px;
font-weight: 400;
}
.label-title {
font-weight: 500;
text-transform: uppercase;
font-size: 15px;
fill: black;
}
.data {
fill: #f86d36;
stroke-width: 1;
}
.graph .dot-joints {
stroke: #f86d36;
stroke-dasharray: 0;
stroke-width: 3;
}
svg:hover .data,
svg:hover .dot-joints.x-grid{filter:url(#f)}
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph"
aria-labelledby="title" role="img">
<defs>
<filter id="f" filterUnits="userSpaceOnUse" id="shadow" x="-10" y="-150" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="3" dy="1" result="shadow"></feOffset>
<feFlood flood-color="rgba(0,0,0,.52)" result="color" />
<feComposite in ="color" in2="shadow" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="705" y1="370" y2="370"></line>
</g>
<g class="labels x-labels"><text x="100" y="400">2008</text><text x="246" y="400">2009</text><text x="392"
y="400">2010</text><text x="538" y="400">2011</text><text x="694" y="400">2012</text><text x="400" y="440"
class="label-title">Year</text></g>
<g class="labels x-labels"><text x="70" y="15">15</text><text x="70" y="131">10</text><text x="70"
y="248">5</text><text x="70" y="373">0</text><text x="35" y="200" class="label-title">Price</text></g>
<g class="data" data-setname="Our first data set">
<circle cx="95" cy="192" data-value="7.2" r="5"></circle>
<circle cx="240" cy="141" data-value="8.1" r="5"></circle>
<circle cx="388" cy="179" data-value="7.7" r="5"></circle>
<circle cx="531" cy="200" data-value="6.8" r="5"></circle>
<circle cx="677" cy="104" data-value="6.7" r="5"></circle>
</g>
<g class="dot-joints x-grid" >
<line x1="95" x2="240" y1="192" y2="141"></line>
<line x1="240" x2="388" y1="141" y2="179"></line>
<line x1="388" x2="531" y1="179" y2="200"></line>
<line x1="531" x2="677" y1="200" y2="104"></line>
</g>
</svg>
UPDATE
The OP is commenting:
Can you explain it in a little more details
In the <defs> I've added an svg filter. This filter first is creating a blur feGaussianBlur. You may need to change the stdDeviation in order to change the aspect of the shadow.
Next is offsetting the the previously created blur feOffset: You may need to change the dx="3"and dy="1" attributes in order to move the shadow.
Then feFlood and feComposite are used to add a color to the shadow. In this case I'm using a semitransparent black, but you can use the color you want.
I'm using this filter to apply the shadow only to those elements you want: filter:url(#f) - where f is the filter's id