Auswirkungen auf die gleichen Klassen in verschiedenen SVGs

Ich mache eine Vorlage, die Benutzer mit ihren Vorlieben ändern können. Ich arbeite mit SVGs in einem Objekt-Tag, alle diese SVGs sind Symbole und ich muss eine hexadezimale Farbe für alle von ihnen setzen. Wenn ich schlicht die svg in meinem html setzenAuswirkungen auf die gleichen Klassen in verschiedenen SVGs

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="35.482px" height="36.276px" viewBox="0 10.893 35.482 36.276" enable-background="new 0 10.893 35.482 36.276" 
xml:space="preserve"> 
<g> 
<path class="general-delete-btn" fill="#083847" d="M33.844,38.126l-7.222-7.221l-..."/> 
</g> 
</svg>

Ich konnte einfach Gebrauch ein

$(".general-delete-btn").attr("fill", "#000000");

Und das ist es, ändere ich sie alle, aber SVGs größer werden ein größeres in meinem Projekt so würde Ich mag um es nur mit der SVG-Referenz zu tun.

<object class='general-details-btn' data='general-details-btn.svg' type='image/svg+xml' height='20' width='20'>

Wie kann ich das erste Ergebnis erhalten, aber durch die SVG in einem Objekt-Tag zugreifen? Danke für jede Richtlinie. Grüße

Quelle

2016-05-21 Diego

Sie müssen das Dokument, das das Objektelement enthält, abrufen und dann die Elemente mit dieser Klasse in diesem Dokument suchen und schließlich setAttribute für diese Elemente aufrufen. So etwas wie dies ...

document.querySelectorAll(".general-details-btn").forEach(function(element, index, array) { 
    element.contentDocument.querySelectorAll(".general-delete-btn").forEach(function(element, index, array) { 
    element.setAttribute("fill", "#000000"); 
    }); 
});

Quelle

2016-05-21 08:33:31

Ich vermisse es zu zeigen, dass, da sie Symbole sind, es mehr als ein Objekt der gleichen Klasse sein kann, so dass die ID nicht relevant ist, ich versuche mit Tags, aber kann es nicht schaffen. Ich habe die Frage bearbeitet, damit du sie sehen kannst. Vielen Dank. – Diego

Sie können eine QuerySelectorAll auf das Hauptdokument dann und forEach auf diesem tun. Ich habe die Antwort geändert, bitte ändere die Frage nicht noch einmal. –

ich nicht getan konnte es kürzer, aber das tat es mit einer doppelten Iteration und js, funktioniert es zumindest. Danke für deine Hilfe natürlich. Schöne Grüße.

Quelle

2016-05-21 10:41:56 Diego

Auswirkungen auf die gleichen Klassen in verschiedenen SVGs

Antwort

Verwandte Themen