Related
So basically I have a triangular shape and I want to mask it in an image/gif.
<svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
<div class="clipSvg2">
<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask11">
<!-- <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
-->
</mask>
</defs>
//Here add some mask=url(#mask11)
<image
width="100%" height="100%" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"></image>
</svg>
</div>
As you see I'm trying to mask the mask11 in my image but I can't do that..I've search a lot here and its not really working I don't know how or what to do about it can anyone help me? Thanks a lot.
I'm not sure what it should look like, but here are two examples. The first uses a clip-path. With the clip-rule="evenodd" it is only the "frame" that shows.
The second is a mask. In the mask the path has a white fill – that is what makes the image show.
In both cases I made the viewBox the same aspect ratio as the image to make the image take up the entire space of the SVG.
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="cp1">
<path clip-rule="evenodd"
d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" />
</clipPath>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
clip-path="url(#cp1)"/>
</svg>
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="m1">
<path d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z"
fill="white"/>
</mask>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
mask="url(#m1)"/>
</svg>
Can I put svg resources used in the website behind the end of body, in order to keep
them outside of what will be rendered?
In short: Is it legal to do the following?
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 315.424 315.424" >
<use href="#arrow" fill="rgb(0,44,89)" />
</svg>
</body>
<svg>
<g id="arrow">
<path d="M311.929,222.266l-96.119-67.342c-1.413-0.99-2.783-1.513-4.307-1.513c-3.307,0-6.471,2.512-6.471,7.313v41.05H19.886
c-4.962,0-8.854,4.132-8.854,9.094v35.563c0,4.962,3.892,9.343,8.854,9.343h185.146v40.81c0,4.801,3.167,7.19,6.474,7.19
c0.001,0-0.089,0-0.089,0c1.524,0,3.032-0.461,4.445-1.451l96.09-67.306c2.214-1.55,3.473-3.864,3.473-6.375
S314.142,223.815,311.929,222.266z" />
</g>
</svg>
</html>
As mentioned before in the comments:
It's not valid and many browser won't display your elements.
So inserting your svg assets at the top or bottom of your <body> is the preferrable method.
Caution: Hiding your asset svg via display:none will break some referenced definitions like:
filters
gradients
masks and clip-paths
It works flawlessly for shape elements (like icons)
Example
function displayNone() {
document.querySelector('#svgAssets').style.display = 'none';
}
svg {
border: 1px dotted #ccc;
height: 10em;
display: inline-block;
}
<p><button onclick="displayNone()">Set display:none</button></p>
<svg viewBox="0 0 315.424 315.424">
<use href="#arrow" fill="red" />
</svg>
<svg viewBox="0 0 100 100">
<use href="#circle" fill="green" />
</svg>
<svg viewBox="0 0 200 100">
<use href="#ellipse" fill="url(#gradient)" />
</svg>
<svg id="svgAssets" style="visibility:visible; width:0; height:0" aria-hidden="true">
<defs>
<linearGradient id="gradient">
<stop stop-color="red" offset="0%"/>
<stop stop-color="orange" offset="100%"/>
</linearGradient>
</defs>
<symbol id="arrow" viewBox="0 0 315.424 315.424">
<path d="M311.929,222.266l-96.119-67.342c-1.413-0.99-2.783-1.513-4.307-1.513c-3.307,0-6.471,2.512-6.471,7.313v41.05H19.886 c-4.962,0-8.854,4.132-8.854,9.094v35.563c0,4.962,3.892,9.343,8.854,9.343h185.146v40.81c0,4.801,3.167,7.19,6.474,7.19 c0.001,0-0.089,0-0.089,0c1.524,0,3.032-0.461,4.445-1.451l96.09-67.306c2.214-1.55,3.473-3.864,3.473-6.375 S314.142,223.815,311.929,222.266z" />
</symbol>
<symbol id="circle" viewBox="0 0 100 100">
<circle cx="50%" cy="50%" r=50% />
</symbol>
<symbol id="ellipse" viewBox="0 0 200 100">
<ellipse cx="100" cy="50" rx="100" ry="50" />
</symbol>
</svg>
In the above example I'm using <symbol> elements which could be used as an alternative to <defs>. They also support different viewBox properties for each icon.
If you just need to place icons via <use> you could also use external file references like so:
<svg viewBox="0 0 315.424 315.424">
<use href="svgIcons.svg#arrow" fill="red" />
</svg>
However, your svg files need to be same domain (or send with appropriate CORS headers)
If the purpose is not to have the original #arrow rendered in the document, you might include it inside the svg in the body, wrapped around defs.
Demo in the snipped below.
<svg xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 315.424 315.424">
<defs>
<g id="arrow">
<path d="M311.929,222.266l-96.119-67.342c-1.413-0.99-2.783-1.513-4.307-1.513c-3.307,0-6.471,2.512-6.471,7.313v41.05H19.886
c-4.962,0-8.854,4.132-8.854,9.094v35.563c0,4.962,3.892,9.343,8.854,9.343h185.146v40.81c0,4.801,3.167,7.19,6.474,7.19
c0.001,0-0.089,0-0.089,0c1.524,0,3.032-0.461,4.445-1.451l96.09-67.306c2.214-1.55,3.473-3.864,3.473-6.375
S314.142,223.815,311.929,222.266z" />
</g>
</defs>
<use href="#arrow" fill="rgb(0,44,89)" />
</svg>
I am trying to combine all svg icons into one sprite file like this for organization, caching and other purposes. But for some reason, linearGradient is not being applied
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<!-- other icons -->
<!-- ... -->
<g id="toggle">
<path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
<circle fill="url('#toggle-linear-gradient')" cx="14" cy="3.992" r="3"/>
<defs>
<linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C8C8B"/>
</linearGradient>
</defs>
</g>
</svg>
Now, in file preview I can see circle with applied gradient correctly
When I try to import it into my HTML like this
<svg>
<use href="#toggle" xlink:href="#toggle"></use>
</svg>
the circle is not being colored with defined gradient
When I moved <linearGradient> out of svg file, it worked, but why?
<svg>
<linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C8C8B"/>
</linearGradient>
<use href="#toggle" xlink:href="#toggle"></use>
</svg>
Even tho it worked, the problem is, that this kills the purpose of keeping all the icons in one file if some styling can only be defined from the outside. Displaying same icon will force me defining same gradient multiple times. Would love to have everything in the same file. Any ideas or insights?
P.S. importing as <img> displays the circle gradient correctly.
Pretty sure, you have hidden your main svg asset file by display:none.
If you change this to visibility:hidden it should work:
function unhide(){
document.querySelector('.dsp-non').classList.remove('dsp-non');
}
.svgAssetHidden{
visibility:hidden;
position:absolute;
width:0px;
height:0px;
overflow:hidden;
}
.svgIcon{
display:inline-block;
width:10em;
}
.dsp-non{
display:none;
}
<button onclick="unhide()">remove display:none</button>
<h3>visibility:hidden</h3>
<svg class="svgIcon" viewBox="0 0 50 20">
<use href="#toggle" href="#toggle"></use>
</svg>
<h3>display:none</h3>
<svg class="svgIcon" viewBox="0 0 50 20">
<use href="#toggle2" href="#toggle"></use>
</svg>
<svg class="svgAssetHidden" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<!-- other icons -->
<!-- ... -->
<g id="toggle">
<path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
<circle fill="url('#toggle-linear-gradient')" cx="14" cy="3.992" r="3"/>
<defs>
<linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C8C8B"/>
</linearGradient>
</defs>
</g>
</svg>
<svg class="svgAssetDspNon dsp-non" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<!-- other icons -->
<!-- ... -->
<g id="toggle2">
<path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
<circle fill="url('#toggle-linear-gradient2')" cx="14" cy="3.992" r="3"/>
<defs>
<linearGradient id="toggle-linear-gradient2" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C0000"/>
</linearGradient>
</defs>
</g>
</svg>
Hiding a svg by display:none will also break some other features like filters.
I am using SVG shape with linear gradient color via
background: url(#{$imgUrlBase}/element.svg);
Works just fine everywhere, except for Edge and IE, where the shape appears correctly, but instead of gradient, there is only solid color.
For multiple reasons (simple use of png fallback) I would like to use this way of implementation. I did not find any not of limitation of this usage regarding Edge.
This is element.svg
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="l" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 308 308" style="enable-background:new 0 0 308 308;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#s);}
</style>
<g id="Page-1">
<defs>
<linearGradient id="s" gradientUnits="userSpaceOnUse" x1="-483.7941" y1="514.2445" x2="-484.1468" y2="514.5996" gradientTransform="matrix(620 0 0 -620 300215 319095)">
<stop offset="0" style="stop-color:#FF0000"/>
<stop offset="1" style="stop-color:#00FF00"/>
</linearGradient>
</defs>
<path id="shape" class="st0" d="..."/>
</g>
</svg>
Any idea how to make SVG with linear background work as a background image in Edge and IE 11?
There is something about that SVG that IE doesn't like. I think it may be the odd gradientTransform that's in there.
https://jsfiddle.net/efgtu2pj/
If you get rid of it and update the gradient coordinates to compensate, it renders fine.
<svg version="1.1" id="l" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 308 308">
<style type="text/css">
.st0{fill:url(#s);}
</style>
<g id="Page-1">
<defs>
<linearGradient id="s" gradientUnits="userSpaceOnUse" x1="308" y1="308" x2="-50" y2="0">
<stop offset="0" style="stop-color:#FF0000"/>
<stop offset="1" style="stop-color:#00FF00"/>
</linearGradient>
</defs>
<path id="shape" class="st0" d="M154,0,308,308,0,308"/>
</g>
</svg>
Note that the coords I have used aren't exactly equivalent. I have just chosen values that look to give approximately the same results as the original.
Here is an example of an SVG with a gradient that I exported out of illustrator, and then edited the SVG code to remove gradientTransform, and replaced x1, y1, x2, y2 values so that it works in internet explorer and edge:
Illustrator export:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="150px" viewBox="0 0 40 150" enable-background="new 0 0 40 150" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-1023.5181" y1="4587.5352" x2="-1023.2139" y2="4587.5352" gradientTransform="matrix(0 492.7101 -492.7101 0 2260344.5 504297.75)">
<stop offset="0" style="stop-color:#FFCC07"/>
<stop offset="0.5111" style="stop-color:#346966"/>
<stop offset="1" style="stop-color:#51538C"/>
</linearGradient>
<rect fill="url(#SVGID_1_)" width="40" height="150"/>
<path fill="#FFFFFF" d="M20.81,143.313c0.349-0.071,0.677-0.258,0.907-0.564l10.981-14.513c0.504-0.667,0.371-1.625-0.296-2.13
c-0.666-0.504-1.625-0.372-2.13,0.295l-8.354,11.042v-31.681c0-0.835-0.684-1.52-1.521-1.52c-0.835,0-1.52,0.685-1.52,1.52v32.117
L9.674,127.03c-0.541-0.638-1.506-0.717-2.144-0.176c-0.638,0.541-0.716,1.505-0.176,2.143l11.773,13.878
C19.551,143.373,20.229,143.525,20.81,143.313"/>
</svg>
My edited code:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="150px" viewBox="0 0 40 150">
<style type="text/css">
.st0{fill:url(#s);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="40" y2="150" >
<stop offset="0" style="stop-color:#FFCC07"/>
<stop offset="0.5111" style="stop-color:#346966"/>
<stop offset="1" style="stop-color:#51538C"/>
</linearGradient>
<rect fill="url(#SVGID_1_)" width="40" height="150"/>
<path fill="#FFFFFF" d="M20.811,143.313c0.349-0.07,0.676-0.258,0.906-0.563l10.981-14.513c0.504-0.668,0.37-1.625-0.296-2.131
c-0.666-0.504-1.625-0.371-2.131,0.295l-8.354,11.043v-31.682c0-0.835-0.684-1.52-1.521-1.52c-0.835,0-1.52,0.685-1.52,1.52v32.117
L9.674,127.03c-0.541-0.638-1.506-0.718-2.144-0.177c-0.638,0.541-0.716,1.506-0.176,2.144l11.773,13.878
C19.551,143.373,20.229,143.525,20.811,143.313"/>
</svg>
This image shows the differences:
file diff screenshot
I'm using the following markup:
<a href="#">
<!-- first svg -->
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="23.9995" y1="0" x2="23.9995" y2="48.0005">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#EAEAEA"/>
</linearGradient>
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M48,42c0,3.313-2.687,6-6,6H6c-3.313,0-6-2.687-6-6V6
c0-3.313,2.687-6,6-6h36c3.313,0,6,2.687,6,6V42z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M27.695,29.811c0,0,1.519,5.062,5.974,4.05
c4.456-1.013,4.759-6.684,2.127-9.619C33.163,21.305,26.379,25.962,27.695,29.811z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.828,18.179c0,0-3.344,3.499-2.763,9.192
c0.581,5.694,4.186,10.392,16.208,10.392c12.021,0,15.045-6.275,15.116-11.436c0.071-5.159-2.253-7.46-3.344-8.243
c0,0,0.007-3.704-0.343-5.661c0,0-1.85-0.219-5.845,2.07c0,0-5.454-0.533-12.722,0.065c0,0-3.053-2.04-6.129-2.574
C12.006,11.984,11.496,15.196,11.828,18.179z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#E2B89F" d="M17.211,23.815h14.916c0,0,4.227-0.475,4.227,6.44
c0.034,6.086-11.139,5.693-11.139,5.693s-12.236,0.486-12.243-6.269C12.956,23.579,17.211,23.815,17.211,23.815z"/>
<g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#9C584F" d="M30.767,26.591c0.959,0,1.737,1.25,1.737,2.787
c0,1.54-0.778,2.788-1.737,2.788c-0.958,0-1.736-1.248-1.736-2.788C29.03,27.841,29.809,26.591,30.767,26.591z"/>
<path fill="#FFFFFF" d="M30.767,32.666c-1.254,0-2.236-1.444-2.236-3.288c0-1.843,0.982-3.287,2.236-3.287
c1.255,0,2.237,1.444,2.237,3.287C33.004,31.222,32.021,32.666,30.767,32.666z M30.767,27.091c-0.585,0-1.236,0.939-1.236,2.287
c0,1.349,0.651,2.288,1.236,2.288s1.237-0.939,1.237-2.288C32.004,28.03,31.352,27.091,30.767,27.091z"/>
</g>
</g>
<g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#9C584F" d="M18.767,26.591c0.959,0,1.737,1.25,1.737,2.787
c0,1.54-0.778,2.788-1.737,2.788c-0.958,0-1.736-1.248-1.736-2.788C17.03,27.841,17.809,26.591,18.767,26.591z"/>
<path fill="#FFFFFF" d="M18.767,32.666c-1.254,0-2.236-1.444-2.236-3.288c0-1.843,0.982-3.287,2.236-3.287
c1.254,0,2.237,1.444,2.237,3.287C21.004,31.222,20.021,32.666,18.767,32.666z M18.767,27.091c-0.585,0-1.236,0.939-1.236,2.287
c0,1.349,0.651,2.288,1.236,2.288c0.585,0,1.237-0.939,1.237-2.288C20.004,28.03,19.352,27.091,18.767,27.091z"/>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#9C584F" d="M24.076,32.705c0,0,0.499-1.418,1.109-0.089
c0,0-0.457,0.297-0.285,0.996l1.428,0.546h-3.23l1.28-0.575C24.378,33.583,24.562,32.527,24.076,32.705z"/>
</svg>
</a>
<a href="#">
<!-- second svg -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 480 480" enable-background="new 0 0 480 480" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="261.3877" y1="161.9675" x2="261.3877" y2="173.4675" gradientTransform="matrix(41.667 0 0 41.667 -10651.2422 -6748.2861)">
<stop offset="0" style="stop-color:#EC9728"/>
<stop offset="1" style="stop-color:#DF4C18"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M479.6,419.7c0,33.1-26.8,59.9-59.9,59.9H60.3c-33.1,0-59.9-26.8-59.9-59.9V60.3
c0-33.1,26.8-59.9,59.9-59.9h359.4c33.1,0,59.9,26.8,59.9,59.9V419.7z"/>
<circle fill="#009245" cx="142.8" cy="139" r="92"/>
<circle fill="#D4145A" cx="304.8" cy="148" r="92"/>
<ellipse fill="#D9E021" cx="206.2" cy="320.8" rx="182.4" ry="137.8"/>
<ellipse fill="#0000FF" cx="388.6" cy="217.1" rx="69.8" ry="131.5"/>
</svg>
</a>
and the following styling:
svg {
display: inline-block;
width: 64px;
height: 64px;
}
The result displays a behavior which I don't understand.
Why does the background path of the first svg change color on hover to match the color of the second svg? This behavior is consistent regardless of which svg is placed first. The first svg (Github icon) is part of Zurb's webicons. Here is a Codepen which illustrates the problem in question. Please note that I'm using Bootstrap.
You have two gradients with the same ID #SVGID_1_, which is illegal in a XML file. One in each SVG:
<linearGradient id="SVGID_1_" ...> ... </linearGradient>
Two paths reference it. That is probably confusing the browser making it behave strangely. It seems that a different gradient object is referenced when the hover event over the link occurs, causing the change in color (I am not sure.) Different algorithms might select one or the other in different moments, since they expect the IDs to be unique.
If you use different IDs for each gradient the problem will not occur.
You have multiple layers on page with same id. This can happen after Adobe Illustrator export. As workaround you can include css properties directly in svg objects instead class styles.
When you save illustration as SVG, in SVG More Options make sure that in CSS Properties you have selected Presentation Atributes.