• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

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

xSTVNx

Mitglied
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. :mad::confused:

Javascript:
$('#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. :oops::oops::oops:

HTML:
<header id="mpHeader">
    ...
    <ul>
        ...
        <li class="current">
            <a>
                <div class="icon">
                    <svg>...</svg>
                </div>
            </a>
        </li>
        ...
    </ul>
    ...
</header>
 
Zuletzt bearbeitet:
Werbung:
Danke, das schaue ich mir heute Abend an. :smile:

Wobei ich nachwievor nicht verstehe, wieso das mit schnödem jQuery nicht funktionieren soll, zumal ich es ja korrekt im Quelltext hinzugefüge sehe. :eek:
 
Werbung:
Probier es mal mit Vanilla .
Habe zwar noch nicht alles verstanden bei dem Thema, aber hier klappt es mit einem anderen SVG
 
Zuletzt bearbeitet:
Zurück
Oben