Wie füge ich ein eingebettetes Sprite zu DOM in Javascript

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title></title> 
    <style> 
     svg{ display: inline-block; } 
    </style> 
    <script src="my.js"></script> 
    </head> 
    <body> 
    <embed src="sprites.svg" type="image/svg+xml" width="0" height="0" /> 
    <svg id="MAIN" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 320 208" shape-rendering="crispEdges"> 
     <path d="M0 0h320v208h-320v-208z" fill="#000"/> <!-- Fill screen --> 
     <svg id="sprite1"><use xlink:href="sprites.svg#SP1" x="64" y="128"</use></svg> 
     <svg id="sprite2"><use xlink:href="sprites.svg#SP2" x="64" y="128"</use></svg> 
     <svg id="sprite3"><use xlink:href="sprites.svg#SP3" x="64" y="128"</use></svg> 
    </svg> 
    <script> 
     start(1); // Call Func in my.js 
    </script> 
    </body> 
</html>

Ich habe Hunderte von Sprites in "sprites.svg". Wie füge ich in Javascript die Sprites hinzu, die ich über Javascript in das DOM möchte. Ich möchte sie hinzugefügt, so dass sie genau wie Sprite1 zu Sprite3 in der Beispiel-HTML-Seite oben sind, danke KeithWie füge ich ein eingebettetes Sprite zu DOM in Javascript

Quelle

2017-09-08 Keith Watterson

Check-out https://github.com/jonathantneal/svg4everybody versucht zu helfen und sehen Sie, wenn Sie, dass bewegen kann. Es wird stabiler sein als die eigene – Dominik

für eine Sache, Ihr 'use'-Tag ist inkorrekt (fehlt'> 'vor' ') - das ist wahrscheinlich die Reparatur, die Sie brauchen .. aber lesen Sie einige Dokumentation auf [ ] (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use) –

Mögliches Duplikat von [SVG-Sprite in externer Datei] (https://stackoverflow.com/questions/22993408/svg-sprite-in-external-datei) – Aknosis

Arbeitete es aus, nicht so komplex, wie ich dachte.

var svgURI = "http://www.w3.org/2000/svg"; 
var mainSVG = document.getElementById("MAIN"); // my main SVG 
var svg  = document.createElementNS(svgURI, 'svg'); 
svg.id  = "sprite4"; 
svg.innerHTML = "<use xlink:href='sprites.svg#SP4'></use>"; 
mainSVG.appendChild(svg);

Dank jeder, der

Quelle

2017-09-11 06:15:29

Wie füge ich ein eingebettetes Sprite zu DOM in Javascript

Antwort

Verwandte Themen