Ich versuche via jQuery einem SVG-Code ein <defs>-Element hinzufügen und dieses anschließend einem fill-Attribut zuweisen, was eigtl. auch klappt, aber dann eben doch nicht.
Problem-bzw. Quelltext-Analyse (via browserinternem Developer-Tool):
<defs>-Element und fill-Attribut werden korrekt hinzugefügt
wenn ich das <defs>-Element kopiere und zweites Mal unter dem ersten einfüge, und dann das erste lösche, funktioniert es
wenn ich das <defs>-Element kopiere und zweites Mal unter dem ersten einfüge, und dann das zweite lösche, funktioniert es nicht
wenn ich das <defs>-Element lösche, und dann neu hinzufüge, funktioniert es
Was ist denn da los? Irgendwie sprengt das regelrecht die Grenzen meiner Logik.
Code
<script src="/js_webseite/jquery.js"></script>
<header id="mpHeader">
<ul>
<li class="current">
<a>
<div id="icon">
<h1>Mit Javascript</h1>
<svg width="400" height="200"></svg>
<h1>Mit html</h1>
<svg width="400" height="200">
<defs> <linearGradient id="logo-gradient1" x1="50%" y1="0%" x2="50%" y2="100%" > <stop offset="0%" stop-color="#7A5FFF"> <animate attributeName="stop-color" values="#7A5FFF; #01FF89; #7A5FFF" dur="4s" repeatCount="indefinite"></animate> </stop> </linearGradient> </defs> <g> <path fill="url('#logo-gradient1')" d="M315.69646,6.17948262 C328.855897,-3.88648819 332.169516,-0.795739865 323.113707,13.0582738 L217.327474,174.895153 C208.264469,188.760175 193.218185,188.990964 183.71996,175.409636 L126.769111,93.9767151 L12.5417619,181.728698 C-0.593710633,191.81966 -3.91947426,188.74917 5.1230211,174.855879 L110.403975,13.0975513 C119.44219,-0.789163345 134.468377,-1.03753706 143.966601,12.5437917 L200.917445,93.9767151 L315.69646,6.17948262 Z"></path></g>
</svg>
</div>
</a>
</li>
</ul>
</header>
<script>
g1=document.getElementsByTagName('svg')[0];
g1.innerHTML='<defs> <linearGradient id="logo-gradient" x1="50%" y1="0%" x2="50%" y2="100%" > <stop offset="0%" stop-color="#7A5FFF"> <animate attributeName="stop-color" values="#7A5FFF; #ff0000; #7A5FFF" dur="6s" repeatCount="indefinite"></animate> </stop> </linearGradient> </defs> <g> <path fill="#123456" d="M315.69646,6.17948262 C328.855897,-3.88648819 332.169516,-0.795739865 323.113707,13.0582738 L217.327474,174.895153 C208.264469,188.760175 193.218185,188.990964 183.71996,175.409636 L126.769111,93.9767151 L12.5417619,181.728698 C-0.593710633,191.81966 -3.91947426,188.74917 5.1230211,174.855879 L110.403975,13.0975513 C119.44219,-0.789163345 134.468377,-1.03753706 143.966601,12.5437917 L200.917445,93.9767151 L315.69646,6.17948262 Z"></path></g>';
g2=document.getElementsByTagName('path')[0];
g2.setAttributeNS(null, "fill", "url('#logo-gradient')");
</script>