Develop Reference

Reverse radialGradient SVG animation on mouseout on hovered element

I want the radialGradient animation to apply to the single hexagon only that you are hovering over and then onmouseout I want the animation to reverse.
How can I make the radialGradient trigger on the hexagon you hover on only (not all the hexagons) and then reverse the animation on mouseout/mouseleave? Thank you.
I tried adding
{ fill: url(#myRadialGradient4);}
to
.filter-class
But obviously as soon as mouseout happens the class is removed stopping the smooth reverse animation on mouseout.
I have tried this:
https://codepen.io/daneli84/pen/OJVZmeJ
//
var flagBlur = document.querySelector('.flag-blur');
var flags = document.querySelectorAll('.flag');
//
function startPage() {
flags.forEach(flag => {
flag.onmouseover = function() {
flag.classList.add('filter-class')
TweenMax.fromTo(flagBlur, 19, {
attr: {
stdDeviation: 0.5
}
}, {
attr: {
stdDeviation: 1
},
ease: Power1.easeInOut
});
}
flag.onmouseleave = function() {
flag.classList.remove('filter-class')
}
})
}
startPage();
/* grid styling */
use {-webkit-transition: 5s;
-webkit-transition: all 5s ease;
transition: all 5s ease;
}
use:hover {
cursor: pointer;
}
g { fill: url(#myRadialGradient4);}
#pod { -webkit-transition: all 5s ease;
transition: all 5s ease;}
text{pointer-events:none;color:white!important;}
.filter-class {
filter: url(#filter-1);
}
/* other styling */
svg {
width: 800px!important;
flex: 1;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
font-weight: 700;
font-family: sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg viewBox="0 0 100 100">
<defs>
<radialGradient id="myRadialGradient4"
fx="15%" fy="5%" r="65%"
spreadMethod="pad">
<stop offset="0%" stop-color="#fff" ></stop>
<stop offset="100%" stop-color="#50287C" ></stop>
<animate attributeName="fy" dur="2s" from="90%" to="0%" begin="pod.mouseover" end="pod.mouseout;indefinite" fill="freeze"/>
<animate attributeName="fy" dur="2s" from="0%" to="90%" begin="pod.mouseout" end="pod.mousover;indefinite" fill="freeze"/>
</radialGradient>
<filter id="innershadow" x0="20%" y0="5%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
<feOffset dy="0.2" dx="-0.1"></feOffset>
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
<feFlood flood-color="#E5E5C5" flood-opacity="-15"></feFlood>
<feComposite in2="shadowDiff" operator="in"></feComposite>
<feComposite in2="SourceGraphic" operator="over" result="firstfilter"></feComposite>
<feGaussianBlur in="firstfilter" stdDeviation="0.9" result="blur2"></feGaussianBlur>
<feOffset dy="0.1" dx="0.1"></feOffset>
<feComposite in2="firstfilter" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
<feFlood flood-color="#fff" flood-opacity="0.5"></feFlood>
<feComposite in2="shadowDiff" operator="in"></feComposite>
<feComposite in2="firstfilter" operator="over"></feComposite>
</filter>
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(20,0,12);stop-opacity:1;" />
<stop offset="100%" style="stop-color:rgb(8,20,128);stop-opacity:1" />
</linearGradient>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" class="flag-blur" in="shadowOffsetOuter1" result="shadowBlurOuter1">
</feGaussianBlur>
<feColorMatrix values="200 150 255 0 0 255 255 200 0 0 255 0 0 0 0 0 0 0 1 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<g id="pod">
<polygon stroke="#000000" stroke-width="0.1" points="5,-9 -5,-9 -10,0 -5,9 5,9 10,0" />
</g>
<!-- a transparent grey drop-shadow that blends with the background colour -->
</defs>
<g class="pod-wrap">
<g transform="translate(65, 68)" filter="url(#innershadow)">
<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="2.3" fill="white">TRANSPORT</text>
</g>
<g transform="translate(50, 41)" filter="url(#innershadow)">
<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(35, 50)" filter="url(#innershadow)" >
<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(65, 50)" filter="url(#innershadow)">
<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(50, 59)" filter="url(#innershadow)">
<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
</g>
</svg>

The radial gradient you are animating would need to be a separate one from the one you are using for the rest of the hexagons.
On hover you would switch to the alternate gradient and start the <animation> by calling beginElement() on it. You might also need a third <animation> for the reverse animation.
But that approach is complicated, and I don't think it would produce a very satisfactory result.
A different approach
I would recommend a different approach.
Make the background of each hexagon a rectangle that has the gradient applied to it
then animate that background on hover
use a hexagon shaped clipping path on that rect
You can do that with pure CSS. And it is a lot simpler.
Note: in the example below I've stripped out the filter to make things simpler to follow for this example.
.pod-bg {
-webkit-transition: 5s;
-webkit-transition: all 5s ease;
transition: all 5s ease;
}
.pod-bg:hover {
transform: translate(0, -16px);
}
.h1.flag {
fill: url(#myRadialGradient4);
}
.pod-stroke {
stroke: #000000;
stroke-width: 0.1;
fill: none;
pointer-events: none;
cursor: pointer;
}
text {
pointer-events: none;
color: white;
}
/* other styling */
svg {
width: 800px!important;
flex: 1;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
font-weight: 700;
font-family: sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg viewBox="0 0 100 100">
<defs>
<radialGradient id="myRadialGradient4h" fx="15%" fy="45%" r="65%" spreadMethod="pad">
<stop offset="0%" stop-color="#fff" ></stop>
<stop offset="100%" stop-color="#50287C" ></stop>
</radialGradient>
<polygon id="pod" points="5,-9 -5,-9 -10,0 -5,9 5,9 10,0" />
<!-- a rect the same width and double the height of a pod hexagon -->
<rect id="bg-rect" x="-10" y="-9" width="20" height="36" fill="url(#myRadialGradient4h)"/>
<!-- a clipping path version of the pod hexagon -->
<clipPath id="pod-clip">
<use xlink:href="#pod"></use>
</clipPath>
</defs>
<g class="pod-wrap">
<g transform="translate(65, 68)">
<g clip-path="url(#pod-clip)">
<use xlink:href="#bg-rect" class="pod-bg"/>
</g>
<use xlink:href="#pod" class="pod-stroke"></use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="2.3" fill="white">TRANSPORT</text>
</g>
<g transform="translate(50, 41)">
<g clip-path="url(#pod-clip)">
<use xlink:href="#bg-rect" class="pod-bg"/>
</g>
<use xlink:href="#pod" class="pod-stroke"></use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(35, 50)">
<g clip-path="url(#pod-clip)">
<use xlink:href="#bg-rect" class="pod-bg"/>
</g>
<use xlink:href="#pod" class="pod-stroke"></use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(65, 50)">
<g clip-path="url(#pod-clip)">
<use xlink:href="#bg-rect" class="pod-bg"/>
</g>
<use xlink:href="#pod" class="pod-stroke"></use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
<g transform="translate(50, 59)">
<g clip-path="url(#pod-clip)">
<use xlink:href="#bg-rect" class="pod-bg"/>
</g>
<use xlink:href="#pod" class="pod-stroke"></use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5" fill="white">CNI</text>
</g>
</g>
</svg>

SVG lines not rendering properly

I'm trying to draw a rectangle as four lines. The problem is that the top and left lines appear to be thinner and there is a missing pixel at the right bottom corner (See Screenshot).
HTML svg element :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="500" height="500" style="
padding: 20px;
box-sizing: border-box;
">
<line x1="0" y1="0" x2="20" y2="0" class="line"></line>
<line x1="20" y1="0" x2="20" y2="20" class="line"></line>
<line x1="20" y1="20" x2="0" y2="20" class="line"></line>
<line x1="0" y1="20" x2="0" y2="0" class="line"></line></svg>
</svg>
rendered result in the browser :
[

Only the stroke of a line is visible and it extends equally each side of it. So if you draw a single line from 0, 0 to 100, 0 and the line has width 2 then that line will actually occupy a rectangle with corners (-1, -1), (101, -1), (101, 1), (-1, 1).
So your rectangle's lines are partially outside the drawing canvas and those parts that are outside are not visible.
Also if you want to draw a square you'll need to draw some of the lines longer so that you get a square effect at the corners. Alternatively use a <path> and it will handle the corners without you having to worry about it.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="500" height="500" viewBox="0 0 40 40" style="
padding: 20px;
box-sizing: border-box;
">
<path d="M0,0 20,0 20,20 0,20Z" fill="none" stroke="black" transform="translate(1,1)" />
</svg>
or you could just move the canvas e.g.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="500" height="500" viewBox="-2 -2 40 40" style="
padding: 20px;
box-sizing: border-box;
">
<path d="M0,0 20,0 20,20 0,20Z" fill="none" stroke="black" />
</svg>

Or, in the shortest possible form:
<svg width="250" height="250" viewBox="-1 -1 22 22">
<path d="M0,0H20V20H0z" fill="none" stroke="black"/>
</svg>

I've re-written your SVG with a few small changes and it seems to be working fine.
There are four main changes:
<line /> is a self-closing element.
I have explicitly given each line a stroke-width of 1
Wherever you have used a co-ordinate of 0, I have used 1
I have given each line a stroke-linecap of square
I have also reduced the viewBox to 100 x 100 so you can see the square much larger.
Working Example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100">
<defs>
<style type="text/css"><![CDATA[
svg {
background-color: rgb(255, 0, 0);
padding: 20px;
box-sizing: border-box;
}
.line {
stroke: rgb(255, 255, 255);
stroke-width: 1;
stroke-linecap: square;
}
]]></style>
</defs>
<line x1="1" y1="1" x2="21" y2="1" class="line" />
<line x1="21" y1="1" x2="21" y2="21" class="line" />
<line x1="21" y1="21" x2="1" y2="21" class="line" />
<line x1="1" y1="21" x2="1" y2="1" class="line" />
</svg>

Fade color in path tag

In HTML with SVG you can create a rect with fading color:
<svg>
<rect width="100%" height="100%">
<animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
Now in my code I have a path like that:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>
I am looking for a way to fade the color of the path along the path so that it illustrates some kind of data flow. Is there a way to accomplish that? (via CSS or Javascript).

Try this
#keyframes fade {
0% {
stroke: red;
fill: red;
}
50% {
stroke: blue;
fill: blue;
}
100% {
stroke: red;
fill: red;
}
}
#fade {
animation-name: fade;
animation-duration: 10s;
animation-iteration-count: infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path id="fade" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon id="fade" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>

Svg clipPath location

For the following image, I am trying to clip out everything that not located in the black box shown.
But I perform the clipPath operation and feMorphology filter to show where the clipped box is being drawn. The clip path is not shown in the right position.
This is the generated svg XML
<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<defs id="SvgjsDefs1007">
<clipPath id="SvgjsClipPath1017">
<rect id="SvgjsRect1014" width="315" height="600" x="120" y="27"></rect>
</clipPath>
<filter id="dilate_shape">
<feMorphology operator="dilate" in="SourceGraphic" radius="5" />
</filter>
</defs>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
<g transform="translate(285 325)">
<g filter="url("#dilate_shape")">
<rect x="-325" y="-325" height="650" width="650" fill="lightgreen" clip-path="url("#SvgjsClipPath1017")"></rect>
</g>
<image xlink:href="https://i.imgur.com/xOOB2O4.png" x="-325" y="-325" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="650" height="650" clip-path="url("#SvgjsClipPath1017")"></image>
</g>
</svg>
I can fix this if I remove the translate transform and add it's values into the x and y values of the child image tag. As shown in the following
With the XML being
<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<defs id="SvgjsDefs1007">
<clipPath id="SvgjsClipPath1017">
<rect id="SvgjsRect1014" width="315" height="600" x="120" y="27"></rect>
</clipPath>
<filter id="dilate_shape">
<feMorphology operator="dilate" in="SourceGraphic" radius="5" />
</filter>
</defs>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
<g >
<g filter="url("#dilate_shape")">
<rect x="-40" y="0" height="650" width="650" fill="lightgreen" clip-path="url("#SvgjsClipPath1017")"></rect>
</g>
<image xlink:href="https://i.imgur.com/xOOB2O4.png" x="-40" y="0" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="650" height="650" clip-path="url("#SvgjsClipPath1017")"></image>
</g>
</svg>
So how to I fix this without having to add the transform values into the X and Y positions. One thing to note is that I am using fabricJs(which is a canvas library to convert from canvas to an svg output). So the transforms are automatically applied when the conversion happens. Thus tinkering with the transform values afterwards effects additional images when conversion happens

Google Visualization Pie Chart - changing text coordinates

I have made a simple donut chart (based on the Google Visualization example at https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#donut).
As it only shows one slice (the other is transparent/invisible), I'd like to move the <text> element to the centre of the chart, i.e., within the hole. I know that it simply involves updating the 'x' and 'y' coordinate attributes but I'm having trouble accessing them in the DOM, particularly as there are no IDs/classes to hang onto.
So, how can I target the <text> element of the penultimate <g> element in this code? I'd like to change x="239.45622566746957" y="285.69328724429994" to x="200" y="200"
Javascript preferred but jQuery also fine...
<div id="donutchart" style="position: relative;">
<div style="position: relative; width: 560px; height: 412px;" dir="ltr">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="560" height="412" style="overflow: hidden;" aria-label="A chart.">
<defs id="defs"/>
<rect x="0" y="0" width="560" height="412" stroke="none" stroke-width="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="107" y="58.2" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Time spent at work</text>
</g>
<g>
<rect x="340" y="79" width="113" height="31" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<rect x="340" y="79" width="113" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="357" y="89.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Work</text>
</g>
<rect x="340" y="79" width="12" height="12" stroke="none" stroke-width="0" fill="#b1d123"/>
</g>
<g>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="1" fill="none"/>
</g>
</g>
<g>
<path d="M179.37407264075225,181.84279120188216L127.43518160188061,144.10697800470538A107,107,0,0,1,214,100L214,164.2A42.800000000000004,42.800000000000004,0,0,0,179.37407,181.84279" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"/>
<text text-anchor="start" x="163.54377433253043" y="136.70671275570004" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">15%</text>
</g>
<g>
<path d="M214,164.2L214,100A107,107,0,1,1,127.43518,144.10697L179.37407264075225,181.84279120188216A42.800000000000004,42.800000000000004,0,1,0,214,164.19999" stroke="#ffffff" stroke-width="1" fill="#b1d123"/>
<text text-anchor="start" x="239.45622566746957" y="285.69328724429994" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">85%</text>
</g>
<g/>
</svg>
</div>
</div>
<div style="display: none; position: absolute; top: 422px; left: 570px; white-space: nowrap; font-family: Arial; font-size: 12px; font-weight: bold;">85 (85%)
</div>
<div></div>
</div>

Use a selector like this:
document.querySelector('#donutchart svg > g:nth-last-child(2) text');
This will not work in IE8, as older versions of IE do not support SVG. If you need to support IE8, you will need a selector for the equivalent VML structure.