defs mit jQuery in SVG-Code einfügen

Ich versuche via jQuery einem SVG-Code ein -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): -Element und fill-Attribut werden korrekt hinzugefügt wenn ich das -Element kopiere und zweites Mal unter dem ersten einfüge, und dann das erste lösche, funktioniert es wenn ich das -Element kopiere und zweites Mal unter dem ersten einfüge, und dann das zweite lösche, funktioniert es nicht wenn ich das -Element lösche, und dann neu hinzufüge, funktioniert es Was ist denn da los? Irgendwie sprengt das regelrecht die Grenzen meiner Logik.

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!