Erstellen eines Snap.svg-Objekts aus einem <object>-Element

Question

Die Dokumentation für Snap.svgs Snap()-Funktion listet drei mögliche Möglichkeiten auf, ein Snap-Objekt zu erstellen.

• - Erstellt eine neue, leere Leinwand mit den angegebenen Abmessungen.
• Snap(svg element) - Erstellen eine Snap-Leinwand aus einem bestehenden, Inline-SVG Elemente
• Snap(css selector) - Wie oben, aber mit einem Wähler eher als eine direkten Referenz

Ist es möglich, von einem Snap-Objekt erstellen entweder ein SVG eingebettet entweder als <object> Element oder <img>?

Answer 1

Nur etwas, das ich finden kann, funktioniert vielleicht, verwendet etwas wie das Objekt-Tag, mit contentDocument (muss möglicherweise Unterstützung überprüfen, aber Snap ist nicht wirklich auf alte Browser sowieso ausgerichtet).

Ich denke, die Svg-Bild muss lokal in der Datei sein, so Remote-Aufrufe von Bildern, die ich glaube nicht funktionieren würde (oder vielleicht mit einigen geänderten Servereinstellungen), so konnte ich nicht daran arbeiten eine Geige zu zeigen, nur unten mit einer Test-uRL, so würde der Code so etwas wie ...

in html sein ...

<object id="tux" data="Dreaming_Tux.svg" width="600" height="600" type="image/svg+xml"></object> 

dann js ....

var tux = Snap("#tux"); 
var tuxContent = tux.node.contentDocument; /// grab the referenced content 

var sTux = Snap(tuxContent.firstChild); /// snapify it 
var tuxPaths = sTux.selectAll('path');  /// use snaps selector to grab elements 

tuxPaths.forEach(function(el) { el.attr({ opacity: 0.2 }) }); 

testing example here

Answer 2

Durch den Blick auf den Quellcode, denke ich, nur eine Snap('#object-id') würde Ihnen die SVG geben, anstatt .node.contentDocument tun. Dies mag eine Verbesserung der letzten Zeit sein, aber ab heute ist dies offiziell im Code enthalten.

Hier ist die Unterstützung Quellcode: https://github.com/adobe-webplatform/Snap.svg/blob/5b17fca57cbc4f8a8fd9ddd55cea2511da619ecf/dist/snap.svg.js#L3182-L3184

Answer 3

wahrscheinlich der beste Weg ist Element.node zu gebrauchen Snap nicht mit einem <object> Tag, wenn Sie die svg aus der gleichen Domäne dienen. Z.B. Sie können es nicht aus einem Dateisystem verwenden, Sie müssen einen lokalen Server einrichten (Richtlinie mit demselben Ursprung).

Wenn Sie

<object id="graph" data="somevectors.svg" type="image/svg+xml"></object> 

haben, dann können Sie nur diese verwenden

var s = Snap(Snap("#graph").node); //wrap the element 

dann die SVG-Elemente mit CSS-Selektoren und Chaos wählen um mit ihnen

var circle = s.select("#circle") 
    .attr({ 
     opacity: .3 
    });