Frage <defs> mit jQuery in SVG-Code einfügen

[xSTVNx]

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.

$('#mpHeader li.current .icon svg').prepend('<defs><linearGradient id="skyGradient" x1="100%" y1="100%"><stop offset="0%" stop-color="lightblue" stop-opacity="1"><animate attributeName="stop-color" values="#BF3030;#BF309B;#7830BF;#3054BF;#30BFBF;#30BF54;#78BF30;#BF9B30;#78BF30;#30BF54;#30BFBF;#3054BF;#7830BF;#BF309B" dur="30s" repeatCount="indefinite" /></stop></linearGradient></defs>').css('fill','url(#skyGradient)');

– oder so –

$('#mpHeader li.current .icon svg').prepend('<defs><linearGradient id="skyGradient" x1="100%" y1="100%"><stop offset="0%" stop-color="lightblue" stop-opacity="1"><animate attributeName="stop-color" values="#BF3030;#BF309B;#7830BF;#3054BF;#30BFBF;#30BF54;#78BF30;#BF9B30;#78BF30;#30BF54;#30BFBF;#3054BF;#7830BF;#BF309B" dur="30s" repeatCount="indefinite" /></stop></linearGradient></defs>').attr('fill','url(#skyGradient)');

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.

<header id="mpHeader">
    ...
    <ul>
        ...
        <li class="current">
            <a>
                <div class="icon">
                    <svg>...</svg>
                </div>
            </a>
        </li>
        ...
    </ul>
    ...
</header>

 

[basti1012]

kuck mal ob dir das weiter helfen tut.
https://stackoverflow.com/questions...query-javascript-or-any-other-plugin/13357998
Ich weiß nicht ob ich das richtig verstehe, aber so wird das dann wohl nicht gehen

 

[xSTVNx]

Danke, das schaue ich mir heute Abend an.

Wobei ich nachwievor nicht verstehe, wieso das mit schnödem jQuery nicht funktionieren soll, zumal ich es ja korrekt im Quelltext hinzugefüge sehe.

 

[basti1012]

Probier es mal mit Vanilla .
Habe zwar noch nicht alles verstanden bei dem Thema, aber hier klappt es mit einem anderen SVG

<defs> mit jQuery in SVG-Code einfügen

<defs> mit jQuery in SVG-Code einfügen 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...

basti1012.bplaced.net