how to append element to dom with case-sensitive elem name - javascript

In the following example I have an inline SVG. You can see that within it, some of the SVG elements (<radialGradient> and <linearGradient>) are camel case. How would I programatically add another such element to the <defs> parent.
document.createElement() converts its argument to lowercase before creating the node, so the case sensitive element name is lost. And the Square remains white in my rendered SVG.
Is there any way to do this using javascript?
const linearGradient = document.createElement('linearGradient')
linearGradient.id="my-gradient"
linearGradient.setAttribute('x1', '320.38')
linearGradient.setAttribute('y1', '145.87')
linearGradient.setAttribute('x2', '685.45')
linearGradient.setAttribute('y2', '447.31')
linearGradient.setAttribute('gradientUnits','userSpaceOnUse')
const stop1 = document.createElement('stop')
stop1.setAttribute('offset', '0')
stop1.setAttribute('stop-color', '#ed1e79')
const stop2 = document.createElement('stop')
stop2.setAttribute('offset', '1')
stop2.setAttribute('stop-color', '#ff0')
linearGradient.appendChild(stop1)
linearGradient.appendChild(stop2)
document.querySelector('svg defs').appendChild(linearGradient)
<svg id="a663773f-8c77-4356-b99a-00f824054fe3" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 894.23 805.64">
<defs>
<radialGradient id="e87c7fc2-e4ed-4d65-889f-d6153929018e" cx="659.66" cy="541.62" r="261.56" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#615ab2"/>
<stop offset="1" stop-color="#c0bde0"/>
</radialGradient>
<linearGradient id="a0a8f98c-a36f-4841-bfb8-51385632467d" x1="23.64" y1="496.01" x2="632.48" y2="496.01" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="1" stop-color="#96e700"/>
</linearGradient>
</defs>
<title>shapes</title>
<g>
<rect x="212.97" y="11" width="529.92" height="529.92" style="fill: url(#my-gradient)"/>
<path d="M769.89,99V606.92H262V99H769.89m22-22H240V628.92H791.89V77Z" transform="translate(-38 -76.99)"/>
</g>
<g>
<path d="M659.66,803.19a261.58,261.58,0,1,1,185-76.61A259.86,259.86,0,0,1,659.66,803.19Z" transform="translate(-38 -76.99)" style="fill: url(#e87c7fc2-e4ed-4d65-889f-d6153929018e)"/>
<path d="M659.66,291.06a249.68,249.68,0,1,1-97.52,19.68,249,249,0,0,1,97.52-19.68m0-22c-150.53,0-272.56,122-272.56,272.56s122,272.57,272.56,272.57,272.57-122,272.57-272.57-122-272.56-272.57-272.56Z" transform="translate(-38 -76.99)"/>
</g>
<g>
<polygon points="175.85 576.03 23.64 427.66 233.99 397.1 328.06 206.49 422.13 397.1 632.48 427.66 480.27 576.03 516.2 785.53 328.06 686.62 139.92 785.53 175.85 576.03" style="fill: url(#a0a8f98c-a36f-4841-bfb8-51385632467d)"/>
<path d="M366.06,308.34l81.65,165.43,5.11,10.37,11.45,1.67,182.57,26.52L514.73,641.11l-8.28,8.07,1.95,11.4,31.19,181.83L376.3,756.56l-10.24-5.38-10.24,5.38L192.53,842.41l31.18-181.83,2-11.4-8.28-8.07L85.28,512.33l182.57-26.52,11.44-1.67,5.12-10.37,81.65-165.43m0-49.71L264.68,464,38,497,202,656.86,163.31,882.63,366.06,776,568.81,882.63,530.09,656.86,694.12,497,467.43,464,366.06,258.63Z" transform="translate(-38 -76.99)"/>
</g>
</svg>


I think
document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient')
should work, according to this

Related

Trying to add SVG data with .innerHTML

I am trying to dynamically create SVG elements using element.innerHTML but it doesn't seem to work.
This is the SVG data I want to use:
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#F4F4F4;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="6.5" x2="50" y2="88.19">
<stop offset="0" style="stop-color:#F8615F"/>
<stop offset="1" style="stop-color:#C1272D"/>
</linearGradient>
<path class="st0" d="M69.5,40.2L69.5,40.2C50.1,74,51.3,85.1,51.1,87.2c0,0,0,0.1,0,0.1c-0.1,0.5-0.5,0.9-1,0.9s-1-0.4-1-0.9
c0,0,0-0.1,0-0.1c-0.2-2.1,0.9-13.2-18.5-47h0c-1.9-3.3-3-7.1-3-11.2C27.5,16.6,37.6,6.5,50,6.5S72.5,16.6,72.5,29
C72.5,33.1,71.4,36.9,69.5,40.2z"/>
<circle class="st1" cx="50" cy="29.1" r="10.4"/>
Here is the HTML:
<svg id="scene" viewBox="0 0 1000 1000">
<g id = "locations">
</g>
</svg>
And the JavaScript:
function createLocation(px, py, video_id = "")
{
var locations = document.getElementById("locations");
var loc = document.createElement("g");
loc.setAttribute("id", "loc_" + video_id);
loc.innerHTML = '<style type="text/css"> \n.st0{fill:url(#SVGID_1_);} \n.st1{fill:#F4F4F4;} \n</style>\n <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="6.5" x2="50" y2="88.19"> \n<stop offset="0" style="stop-color:#F8615F"></stop>\n<stop offset="1" style="stop-color:#C1272D"></stop> \n</linearGradient> \n<path class="st0" d="M69.5,40.2L69.5,40.2C50.1,74,51.3,85.1,51.1,87.2c0,0,0,0.1,0,0.1c-0.1,0.5-0.5,0.9-1,0.9s-1-0.4-1-0.9\nc0,0,0-0.1,0-0.1c-0.2-2.1,0.9-13.2-18.5-47h0c-1.9-3.3-3-7.1-3-11.2C27.5,16.6,37.6,6.5,50,6.5S72.5,16.6,72.5,29\nC72.5,33.1,71.4,36.9,69.5,40.2z"></path> \n<circle class="st1" cx="50" cy="29.1" r="10.4"></circle>';
locations.appendChild(loc);
}
createLocation(0,0);
When I open Inspect Element, the HTML is there, but the SVG doesn't show up. When I try pasting the data manually, instead of doing it through element.innerHTML, it works as expected. Does anyone know why?

The problem is document.createElement used for common HTML. To create SVG elements, you must use document.createElementNS specifying the namespace http://www.w3.org/2000/svg.
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#F4F4F4;}
</style>
<svg id="scene" viewBox="0 0 1000 1000">
<g id = "locations">
</g>
</svg>
<script>
function createLocation(px, py, video_id = "")
{
var locations = document.getElementById("locations");
var loc = document.createElementNS('http://www.w3.org/2000/svg', "g");
loc.setAttribute("id", "loc_" + video_id);
loc.innerHTML = '<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="6.5" x2="50" y2="88.19"> <stop offset="0" style="stop-color:#F8615F"/> <stop offset="1" style="stop-color:#C1272D"/> </linearGradient> <path class="st0" d="M69.5,40.2L69.5,40.2C50.1,74,51.3,85.1,51.1,87.2c0,0,0,0.1,0,0.1c-0.1,0.5-0.5,0.9-1,0.9s-1-0.4-1-0.9 c0,0,0-0.1,0-0.1c-0.2-2.1,0.9-13.2-18.5-47h0c-1.9-3.3-3-7.1-3-11.2C27.5,16.6,37.6,6.5,50,6.5S72.5,16.6,72.5,29 C72.5,33.1,71.4,36.9,69.5,40.2z"/> <circle class="st1" cx="50" cy="29.1" r="10.4"/>';
locations.appendChild(loc);
}
createLocation(0, 0);
</script>

How to calculate the position of a circle depending on the current time on the curve

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1158 696">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:red;stop-opacity:1" />
<stop offset="50%" style="stop-color:blue;stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</linearGradient>
</defs>
<g><g><g><path fill="none" stroke="url(#grad1)" stroke-miterlimit="50" stroke-width="4" d="M0 212.4c241.4 0 274.174-213.852 579-210 304.826 1.853 345.472 211 581 210"/></g></g></g>
<g>
<g opacity=".76">
<path fill="#011134" d="M.25 214.001c239.653 0 274.65-213.852 580.005-210 305.355 3.853 340.062 210 580.005 210v486H.25v-486z"/>
</g>
</g>
<g transform="translate(0, 198)" >
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<circle filter="url(#blurMe)" cx="16" cy="16" r="12" fill="red" />
</g>
</svg>
I've tried to use a formula of Normal distribution
I need to achive a result where the circle moves along the curve depends on the current time for that i need to find a formula which represents the graph described above, but the Gaussian distribution does not give me a desirable graph, the Gaussian distribution gives me next:

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