SVG Resize on smaller screen using Javascript - javascript

I am trying to figure out how can i resize preserveAspectRatio using JavaScript , i have an art that takes 70% of my screen with viewBox of "0 0 750 500" i tried to change this values to be responsive on all screens but i failed the only way to fix it on desktop screen is using preserveAspectRatio="none" , but when i scale the screen it shrinks to be an ugly art , what i am trying to achieve is how to resize SVG's on smaller screens while SVG has preserveAspectRatio = "none" ?
like this svg :
<svg id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 432.53 432.53" preserveAspectRatio="none">
<defs>
<linearGradient id="linear-gradient" y1="216.27" x2="432.53" y2="216.27" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#20c5e0"/>
<stop offset="1" stop-color="#1be28c"/>
</linearGradient>
</defs>
<circle cx="216.27" cy="216.27" r="213.27" fill="none" stroke-miterlimit="10" stroke-width="6" stroke="url(#linear-gradient)"/>
</svg>


Wrap the SVG in a parent container and give it a width and height in relative units
preserveAspectRatio = "none" needs to be removed in order for the image to resize proportionally
By default in SVG preserveAspectRatio = "xMidyMid meet"
.container {
width:30vw;
height:30vh;
}
<div class="container">
<svg id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 432.53 432.53" >
<defs>
<linearGradient id="linear-gradient" y1="216.27" x2="432.53" y2="216.27" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#20c5e0"/>
<stop offset="1" stop-color="#1be28c"/>
</linearGradient>
</defs>
<circle cx="216.27" cy="216.27" r="213.27" fill="none" stroke-miterlimit="10" stroke-width="6" stroke="url(#linear-gradient)"/>
</svg>
</div>


This is not something that should be done with Js. You need to put your SVG in a div, and control that div's dimentions in CSS.
<div class="svg-container">
<svg>...
</div>
.svg-container {
width: 70%;
}
svg {
width: 100%;
height: auto;
}


You can add Width and height attribute in svg code. Or You can use css also.
<svg id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 432.53 432.53" preserveAspectRatio="none" width="200px" height="200px">
<defs>
<linearGradient id="linear-gradient" y1="216.27" x2="432.53" y2="216.27" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#20c5e0"/>
<stop offset="1" stop-color="#1be28c"/>
</linearGradient>
</defs>
<circle cx="216.27" cy="216.27" r="213.27" fill="none" stroke-miterlimit="10" stroke-width="6" stroke="url(#linear-gradient)"/>
</svg>

Related

How to get dashed line svg animation on accordingly scroll?

Whenever i apply on scroll animation on dashed line svg than it converted into a simple line without dashed.
I want same animation which is currently working but line would be dashed-line as shown as Svg Before animation in below example.
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("dashed-path");
var length = triangle.getTotalLength();
// The start position of the drawing
triangle.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
triangle.style.strokeDashoffset = length - draw;
}
.height-div{
height: 500px; width: 100%; background:#eeeeee;
}
.desktop-pattern-wrap{display: inline-block;vertical-align: top;width: 100%;}
.desktop-pattern-wrap > div{float: left;width: 50%;}
<div class="desktop-pattern-wrap">
<div class="desktop-pattern">
<h2>Svg after animation</h2>
<svg width="198px" height="1458px" viewBox="0 0 198 1458" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1="7.06935325%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#DE1652" offset="0%"></stop>
<stop stop-color="#F37121" offset="50.2239948%"></stop>
<stop stop-color="#FBAB26" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="12,16" stroke-linejoin="round">
<g id="Desktop-Homepage-1" transform="translate(-646.000000, -825.000000)" stroke="url(#linearGradient-1)" stroke-width="4">
<g id="content" transform="translate(0.000000, 560.000000)">
<path d="M702,266 C682,424 795.064639,474.307498 716,600 C599,786 769,821 688,988 C548.560405,1275.48657 822.815807,1223 840.843207,1373 C858.870608,1523 605.485477,1528 687.610302,1728" id="dashed-path"></path>
</g>
</g>
</g>
</svg>
</div>
<div class="desktop-pattern-right">
<h2>Svg Before animation</h2>
<svg width="198px" height="1458px" viewBox="0 0 198 1458" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1="7.06935325%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#DE1652" offset="0%"></stop>
<stop stop-color="#F37121" offset="50.2239948%"></stop>
<stop stop-color="#FBAB26" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="12,16" stroke-linejoin="round">
<g id="Desktop-Homepage-1" transform="translate(-646.000000, -825.000000)" stroke="url(#linearGradient-1)" stroke-width="4">
<g id="content" transform="translate(0.000000, 560.000000)">
<path d="M702,266 C682,424 795.064639,474.307498 716,600 C599,786 769,821 688,988 C548.560405,1275.48657 822.815807,1223 840.843207,1373 C858.870608,1523 605.485477,1528 687.610302,1728" id="dashed-path"></path>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="height-div">
</div>

This can be done by adding an SVG mask and then drawing it over the path:
var path = document.getElementById("thePath");
var mask = document.getElementById("maskPath");
var pathLength = path.getTotalLength();
var maskLength = 1050;
mask.style.strokeDashoffset = maskLength;
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = pathLength * scrollpercent;
mask.style.strokeDashoffset = maskLength - draw;
}
<h1>Scroll down</h1>
<svg width="198px" height="1458px" viewBox="0 0 198 1458">
<defs>
<linearGradient x1="50%" y1="7.06935325%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#DE1652" offset="0%"></stop>
<stop stop-color="#F37121" offset="50.2239948%"></stop>
<stop stop-color="#FBAB26" offset="100%"></stop>
</linearGradient>
<mask id="theMask" maskUnits="userSpaceOnUse">
<path id="maskPath"
d="M702,266 C682,424 795.064639,474.307498 716,600 C599,786 769,821 688,988 C548.560405,1275.48657 822.815807,1223 840.843207,1373 C858.870608,1523 605.485477,1528 687.610302,1728"
fill="none"
fill-rule="evenodd"
stroke-dasharray="1637"
stroke-dashoffset="1050"
transform="translate(-646.000000, -825.000000)"
stroke-width="4"
stroke="#fff"/>
</mask>
</defs>
<g id="content" mask="url(#theMask)">
<path id="thePath"
d="M702,266 C682,424 795.064639,474.307498 716,600 C599,786 769,821 688,988 C548.560405,1275.48657 822.815807,1223 840.843207,1373 C858.870608,1523 605.485477,1528 687.610302,1728"
fill="none"
fill-rule="evenodd"
stroke-dasharray="12,16"
transform="translate(-646.000000, -825.000000)"
stroke-width="4"
stroke="url(#linearGradient-1)"
></path>
</g>
</svg>
Codepen Example

How can I make a SVG crop as page is shrinked (resized) instead of resizing the svg itself

My goal is to make my SVG act the same way as Netlify's SVG.
SVG Code
<svg min-width="1152" min-height="523" viewBox="0 0 1152 523" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M592 383C457.295 487.224 134.333 527 0 522V0H1154V172C1001.67 191 729 277 592 383Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="577" y1="0" x2="577" y2="522.669" gradientUnits="userSpaceOnUse">
<stop stop-color="#04724D"/>
<stop offset="1" stop-color="#23E8A5"/>
</linearGradient>
</defs>
</svg>
Html Code
<div class="home_background">
<a class="btn btn-white btn-right">Sign Up</a>
</div>
I am also using gatsby.js, although it doesn't affect the end result.

How to fill gradient svg with solid color on hover

Is it possible to do that with just css? I've got my svg with predefined gradient that I would like to fill with a color on hover in css. What I tried was embedding the svg tag in html structure and then adding a class to path that I would then style in css with fill property. This didn't work though, how should I approach this issue?
SVG tag for reference:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<defs>
<style>
.be51c222-80b4-489f-b2dd-486e23c9eef8{fill:url(#a89527f1-b302-44b4-9a05-0e6cac241929);}
</style>
<linearGradient id="a89527f1-b302-44b4-9a05-0e6cac241929" x1="12.05" x2="11.97" y1="23.94" y2="4.41" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#c41230"/>
<stop offset="1" stop-color="#f62028"/>
</linearGradient>
</defs>
<title>
slide-down
</title>
<g id="a50b190a-9952-4444-9199-5e8e5ee16a51" data-name="Warstwa 2">
<g id="bf15b3ba-4a89-4930-a912-ff1c5832ba6d" data-name="Warstwa 1">
<path d="M24,12A12,12,0,1,0,12,24,12,12,0,0,0,24,12ZM7,13h4V5h2v8h4l-5,6Z" class="be51c222-80b4-489f-b2dd-486e23c9eef8 icon-slide"/>
</g>
</g>
</svg>

Just use the :hover pseudo selector.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<defs>
<style>
.be51c222-80b4-489f-b2dd-486e23c9eef8{fill:url(#a89527f1-b302-44b4-9a05-0e6cac241929);}
.be51c222-80b4-489f-b2dd-486e23c9eef8:hover{fill:blue;}
</style>
<linearGradient id="a89527f1-b302-44b4-9a05-0e6cac241929" x1="12.05" x2="11.97" y1="23.94" y2="4.41" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#c41230"/>
<stop offset="1" stop-color="#f62028"/>
</linearGradient>
</defs>
<title>
slide-down
</title>
<g id="a50b190a-9952-4444-9199-5e8e5ee16a51" data-name="Warstwa 2">
<g id="bf15b3ba-4a89-4930-a912-ff1c5832ba6d" data-name="Warstwa 1">
<path d="M24,12A12,12,0,1,0,12,24,12,12,0,0,0,24,12ZM7,13h4V5h2v8h4l-5,6Z" class="be51c222-80b4-489f-b2dd-486e23c9eef8 icon-slide"/>
</g>
</g>
</svg>

SVG Filter does not binds to its icon

I have a simple SVG icon, where I need to set the linearGradient for it. I'm trying to make it by specifying id of filter to the SVG body, but it does not wok, because in such way I got an empty SVG icon at all... Why?
<svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " style=" fill: url(#chat); filter: url(#chat); " fill="black" stroke="black" stroke-width="0" width="21px" height="21px" viewBox="0 0 17 17">
<filter id="chat">
<linearGradient>
<stop offset="0" stop-color="#cecebf"></stop>
<stop offset="1" stop-color="#9b9b8c"></stop>
</linearGradient>
</filter>
<path d="M7.08,3a6.14,6.14,0,0,0-2.14.37,5.34,5.34,0,0,0-1.68,1A3.64,3.64,0,0,0,1.89,7.07a3.26,3.26,0,0,0,.44,1.62,4.48,4.48,0,0,0,1.33,1.42,2,2,0,0,1,.83,1.38,2.7,2.7,0,0,1,0,.28l.12-.12A1.8,1.8,0,0,1,6,11.07h.24a6.11,6.11,0,0,0,.86.06,6.43,6.43,0,0,0,2.15-.37,5.29,5.29,0,0,0,1.67-1,3.62,3.62,0,0,0,1.38-2.74A3.62,3.62,0,0,0,10.9,4.33a5.29,5.29,0,0,0-1.67-1A6.19,6.19,0,0,0,7.08,3Zm0-2h0C11,1,14.17,3.72,14.17,7.07S11,13.14,7.08,13.14A10,10,0,0,1,6,13.07,6.57,6.57,0,0,1,.94,15v-.39A2.89,2.89,0,0,0,2.66,12.2a2.73,2.73,0,0,0,0-.41A5.78,5.78,0,0,1,0,7.07C0,3.72,3.17,1,7.08,1ZM14.7,14.6a2.32,2.32,0,0,0,1.36,2.06V17a5.46,5.46,0,0,1-4.24-1.66,7.5,7.5,0,0,1-1,.06,6.87,6.87,0,0,1-3.74-1.07,8.79,8.79,0,0,0,5.68-2.05A7.09,7.09,0,0,0,14.6,10a6.45,6.45,0,0,0,.69-2.91c0-.16,0-.33,0-.49A4.81,4.81,0,0,1,17,10.2a4.93,4.93,0,0,1-2.28,4C14.71,14.36,14.7,14.48,14.7,14.6Z"></path>
</svg>

You might need to apply the fill to the path using an ID attached to the gradient
svg {
height: 200px;
}
path {
fill: url(#chat);
}
<svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0" viewBox="0 0 17 17">
<linearGradient id="chat">
<stop offset="0" stop-color="#cecebf"></stop>
<stop offset="1" stop-color="#9b9b8c"></stop>
</linearGradient>
<path d="M7.08,3a6.14,6.14,0,0,0-2.14.37,5.34,5.34,0,0,0-1.68,1A3.64,3.64,0,0,0,1.89,7.07a3.26,3.26,0,0,0,.44,1.62,4.48,4.48,0,0,0,1.33,1.42,2,2,0,0,1,.83,1.38,2.7,2.7,0,0,1,0,.28l.12-.12A1.8,1.8,0,0,1,6,11.07h.24a6.11,6.11,0,0,0,.86.06,6.43,6.43,0,0,0,2.15-.37,5.29,5.29,0,0,0,1.67-1,3.62,3.62,0,0,0,1.38-2.74A3.62,3.62,0,0,0,10.9,4.33a5.29,5.29,0,0,0-1.67-1A6.19,6.19,0,0,0,7.08,3Zm0-2h0C11,1,14.17,3.72,14.17,7.07S11,13.14,7.08,13.14A10,10,0,0,1,6,13.07,6.57,6.57,0,0,1,.94,15v-.39A2.89,2.89,0,0,0,2.66,12.2a2.73,2.73,0,0,0,0-.41A5.78,5.78,0,0,1,0,7.07C0,3.72,3.17,1,7.08,1ZM14.7,14.6a2.32,2.32,0,0,0,1.36,2.06V17a5.46,5.46,0,0,1-4.24-1.66,7.5,7.5,0,0,1-1,.06,6.87,6.87,0,0,1-3.74-1.07,8.79,8.79,0,0,0,5.68-2.05A7.09,7.09,0,0,0,14.6,10a6.45,6.45,0,0,0,.69-2.91c0-.16,0-.33,0-.49A4.81,4.81,0,0,1,17,10.2a4.93,4.93,0,0,1-2.28,4C14.71,14.36,14.7,14.48,14.7,14.6Z"></path>
</svg>

Why are the gradients in this SVG displaying as black?

I have made an svg and added it to my page but it has some rather unusual behaviour, as the page is loading I can see the SVG on the page(looks fine the gradients are showing, see below image. Also I have 2 SVG files One the logo and the other the 'K' gets hidden after loading).
After the page loads however for some reason the gradients disappear and I am left with black ascenders and descenders. (see Below)
But things get weirder still as if I click the green circle button, it causes the side bar to collapse Angular then hides the 'Logo' SVG and displays the 'K' SVG. I only have to hit this toggle once and it correctly the gradient issue. I can hide the 'K' & show the 'Logo' again and everything is perfectly fine. See below image of after toggling hide/show of sidebar.
Here is the SVG Code perhaps it is something it? I would really love some help with this it is very strange behaviour and I am not really sure how to solve it.
Logo SVG:
<!-- BEGIN LOGO SVG -->
<div class="logo" ng-hide="sidebarCollapsed">
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 443.7 1602 312.6" style="enable-background:new 0 443.7 1602 312.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#accend_1_);}
.st1{fill:url(#decend_1_);}
.st2{fill:#FFFFFF;}
</style>
<g id="k">
<linearGradient id="accend_1_" gradientUnits="userSpaceOnUse" x1="-6.7993" y1="1185.7142" x2="42.6791" y2="1114.1494" gradientTransform="matrix(3.135 0 0 -3.135 0 4205.7539)">
<stop offset="0" style="stop-color:#55C953"/>
<stop offset="0.2752" style="stop-color:#52AC55"/>
<stop offset="0.8681" style="stop-color:#49645A"/>
<stop offset="1" style="stop-color:#47535B"/>
</linearGradient>
<polygon id="accend" class="st0" points="78.4,582.9 78.4,445 0,445 0,707.1 79,582.9 "/>
<linearGradient id="decend_1_" gradientUnits="userSpaceOnUse" x1="72.7276" y1="1092.825" x2="1.3943" y2="1202.1583" gradientTransform="matrix(3.135 0 0 -3.135 0 4205.7539)">
<stop offset="0" style="stop-color:#55C953"/>
<stop offset="0.2752" style="stop-color:#52AC55"/>
<stop offset="0.8681" style="stop-color:#49645A"/>
<stop offset="1" style="stop-color:#47535B"/>
</linearGradient>
<polygon id="decend" class="st1" points="146.1,596.7 105,658.2 162.4,749.1 253.6,749.1 "/>
<polygon id="branch" class="st2" points="78.4,699.2 78.4,750 0.3,750 0.3,707.1 165.2,444.7 247,444.7 "/>
</g>
<g id="i_1_">
<rect id="title" x="280.3" y="443.7" class="st2" width="68.3" height="52"/>
<rect id="stalk" x="280.3" y="519.9" class="st2" width="68.3" height="228.9"/>
</g>
<path id="n" class="st2" d="M541.7,749.1V624c0-25.7-5-47.3-35.7-47.3c-31.7,0-39.2,20.7-39.2,48v124.5h-68.7V520.2h64v24.5h0.9
c14.4-23.5,34.8-32.3,62.4-32.3c19.4,0,43.6,7.5,58.6,19.8c21.9,18.2,26.3,47,26.3,74v143.3h-68.7V749.1z"/>
<path id="d" class="st2" d="M830.8,445v94.4c-18.8-19.1-41.7-27.3-68-27.3c-69,0-113.8,55.2-113.8,121.6
c0,67.7,44.2,122.6,114.4,122.6c27,0,53.9-10.3,68.3-32.3h5.6v21.9h62.7V445H830.8L830.8,445z M774,692.6
c-34.2,0-57.4-25.7-57.4-58.9s25.1-57.4,58.3-57.4c32.9,0,57.7,24.5,57.7,57.4C832.7,667.2,808.2,692.6,774,692.6z"/>
<path id="r" class="st2" d="M1015.1,623v125.7h-68.3V519.9h64.3v24.5h0.9c11.9-23.5,31-32.3,57.4-32.3v69
C1038.9,582,1015.1,587.6,1015.1,623z"/>
<path id="e" class="st2" d="M1322,637.2c0-69-50.8-125.1-121-125.1c-67.1,0-120.1,56.4-120.1,122.9c0,66.8,54.5,121.3,121.3,121.3
c51.4,0,91.9-32.3,111.9-79.3H1244c-11.3,15.7-23.2,21.3-41.7,21.3c-27,0-49.5-11.9-53.6-43.3h171.5
C1321.4,651.9,1322,643.1,1322,637.2z M1149.6,608c5.3-21.9,27.3-39.2,52-39.2c24.8,0,46.7,17.2,52,39.2H1149.6z"/>
<path id="dlast" class="st2" d="M1533,445v94.4c-18.8-19.1-42.3-27.3-69-27.3c-69,0-114.1,55.2-114.1,121.6
c0,67.7,44.2,122.6,114.4,122.6c27,0,53.6-10.3,68-32.3h3.8v21.9h65.8V445H1533L1533,445z M1475,692.6c-34.2,0-57.4-25.7-57.4-58.9
s25.1-57.4,58.3-57.4c33.2,0,57.7,24.5,57.7,57.4C1533.7,667.2,1509.2,692.6,1475,692.6z"/>
</svg>
</div>
<!-- END LOGO SVG -->
'K' SVG:
<!-- BEGIN MARK SVG -->
<div class="mark" ng-show="sidebarCollapsed">
<svg version="1.1" id="mark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 444.7 253.6 305.4" style="enable-background:new 0 444.7 253.6 305.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#accend_1_);}
.st1{fill:url(#decend_1_);}
.st2{fill:#FFFFFF;}
</style>
<g id="k">
<linearGradient id="accend_1_" gradientUnits="userSpaceOnUse" x1="-6.7993" y1="1185.7142" x2="42.6791" y2="1114.1494" gradientTransform="matrix(3.135 0 0 -3.135 0 4205.7539)">
<stop offset="0" style="stop-color:#55C953"/>
<stop offset="0.2752" style="stop-color:#52AC55"/>
<stop offset="0.8681" style="stop-color:#49645A"/>
<stop offset="1" style="stop-color:#47535B"/>
</linearGradient>
<polygon id="accend" class="st0" points="78.4,582.9 78.4,445 0,445 0,707.1 79,582.9 "/>
<linearGradient id="decend_1_" gradientUnits="userSpaceOnUse" x1="72.7276" y1="1092.825" x2="1.3943" y2="1202.1583" gradientTransform="matrix(3.135 0 0 -3.135 0 4205.7539)">
<stop offset="0" style="stop-color:#55C953"/>
<stop offset="0.2752" style="stop-color:#52AC55"/>
<stop offset="0.8681" style="stop-color:#49645A"/>
<stop offset="1" style="stop-color:#47535B"/>
</linearGradient>
<polygon id="decend" class="st1" points="146.1,596.7 105,658.2 162.4,749.1 253.6,749.1 "/>
<polygon id="branch" class="st2" points="78.4,699.2 78.4,750 0.3,750 0.3,707.1 165.2,444.7 247,444.7 "/>
</g>
</svg>
</div>
<!-- END MARK SVG -->

If the SVGs look okay when viewed in the browser, then it is unlikely to be the SVGs themselves.
My first suspicion would fall on the JS in your webapp and/or the way you are including the SVGs on your page.
How are the SVGs added to your page? Are the included using an <img> or <object>, or are you including them inline in your page? If it's the latter, then I would suggest the likely cause is the fact that you have duplicate id attributes in your SVGs. For example, both SVGs have gradients named accend_1_ and decend_1_. All ids need to be unique. Try giving them different ids.
If you are not inlining them, then please supply more information about how you are using them.

You have multiple elements with the same id value in the html file from each SVG fragment you are including for instance you have two different linearGradient elements both having id="accend_1_" This is invalid. All id values must be unique within a file.

Categories