Dynamisches Erstellen von SVG-Elementen mit Javascript in HTML
Lesezeit: 4 Minuten
Benutzer2746087
Ich möchte ein Rechteck in einer HTML-Seite erstellen und dann Text auf dieses Rechteck schreiben. Ich brauche diesen Text auch als Hyperlink. Folgendes habe ich getan, aber es funktioniert nicht:
<!DOCTYPE html>
<html>
<body>
<script>
var svg = document.documentElement;
var svgNS = svg.namespaceURI;
var rect = document.createElementNS(svgNS,'rect');
rect.setAttribute('x',5);
rect.setAttribute('y',5);
rect.setAttribute('width',500);
rect.setAttribute('height',500);
rect.setAttribute('fill','#95B3D7');
svg.appendChild(rect);
document.body.appendChild(svg);
var h=document.createElement('a');
var t=document.createTextNode('Hello World');
h.appendChild
document.body.appendChild(h);
</script>
</body>
</html>
Kannst du mir bitte helfen? Danke.
Mögliches Duplikat von SVG-Tag mit JavaScript erstellen
– Zeimyth
29. Mai ’16 um 14:24 Uhr
OP, Sie sollen eine Antwort akzeptieren oder erklären, was fehlt.
– Denys Séguret
19. Juli 16 um 4:58 Uhr
Bitte beachten Sie den Kommentar von @DenysSéguret google.com/…
– Alan
4. August 16 um 13:44 Uhr
Denys Séguret
Veränderung
var svg = document.documentElement;
zu
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
damit Sie eine erstellen SVG Element.
Damit der Link ein Hyperlink ist, fügen Sie einfach ein hinzu href Attribut:
Ok, ich werde. Der Text funktioniert, aber ich möchte seine Position ändern. Ich möchte, dass es auf dem Rechteck angezeigt wird, beispielsweise in der Mitte des Rechtecks.
– Benutzer2746087
15. Dezember 13 um 4:37 Uhr
Beachten Sie, dass der Link ein HTML-Anchor-Tag ist. Wenn Sie möchten, dass er sich im SVG befindet, müssen Sie ein -Element (im svg-Namensraum) und ein -Element erstellen und diese dann anhängen zum SVG. Siehe zB stackoverflow.com/questions/19132443/….
– Erik Dahlström
21. März 14 um 14:17 Uhr
Josef Merdrignac
Um die SVG-Bearbeitung zu erleichtern, können Sie eine Zwischenfunktion verwenden:
function getNode(n, v) {
n = document.createElementNS("http://www.w3.org/2000/svg", n);
for (var p in v)
n.setAttributeNS(null, p, v[p]);
return n
}
Beispiel (mit einer verbesserten getNode-Funktion, die Camelcase für Eigenschaften mit Bindestrich zulässt, z. B. StrokeWidth > Stroke-Breite):
function getNode(n, v) {
n = document.createElementNS("http://www.w3.org/2000/svg", n);
for (var p in v)
n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]);
return n
}
var svg = getNode("svg");
document.body.appendChild(svg);
var r = getNode('rect', { x: 10, y: 10, width: 100, height: 20, fill:'#ff00ff' });
svg.appendChild(r);
var r = getNode('rect', { x: 20, y: 40, width: 100, height: 40, rx: 8, ry: 8, fill: 'pink', stroke:'purple', strokeWidth:7 });
svg.appendChild(r);
Beachten Sie, dass die “Camelcase to Dash-Funktion” die Dinge für Sie vermasselt, wenn Sie versuchen, das Attribut “viewBox” zu setzen.
– Chris K
17. Februar 17 um 10:01 Uhr
Sie haben Recht, wir sollten einige Ausnahmen behandeln, damit es gut funktioniert
– Josef Merdrignac
28. April 17 um 14:28 Uhr
@chris wir können einfach schreiben "stroke-width":2, habe es getestet, funktioniert super. weglassen replace vor V[p] und verwenden Sie Anführungszeichen im Attributnamen, wenn ein Bindestrich darin enthalten ist. Das Mischen von einfachen Attributen ohne Anführungszeichen und Anführungszeichen mit Bindestrich funktioniert ebenfalls.
Probieren Sie diese Funktion aus und passen Sie sie für Ihr Programm an:
var svgNS = "http://www.w3.org/2000/svg";
function createCircle()
{
var myCircle = document.createElementNS(svgNS,"circle"); //to create a circle. for rectangle use "rectangle"
myCircle.setAttributeNS(null,"id","mycircle");
myCircle.setAttributeNS(null,"cx",100);
myCircle.setAttributeNS(null,"cy",100);
myCircle.setAttributeNS(null,"r",50);
myCircle.setAttributeNS(null,"fill","black");
myCircle.setAttributeNS(null,"stroke","none");
document.getElementById("mySVG").appendChild(myCircle);
}
function getNode(n, v) {
n = document.createElementNS("http://www.w3.org/2000/svg", n);
for (var p in v)
n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]);
return n
}
var svg = getNode("svg");
document.body.appendChild(svg);
var r = getNode('rect', { x: 10, y: 10, width: 100, height: 20, fill:'#ff00ff' });
svg.appendChild(r);
var r = getNode('rect', { x: 20, y: 40, width: 100, height: 40, rx: 8, ry: 8, fill: 'pink', stroke:'purple', strokeWidth:7 });
svg.appendChild(r);
.
5707000cookie-checkDynamisches Erstellen von SVG-Elementen mit Javascript in HTMLyes
This website is using cookies to improve the user-friendliness. You agree by using the website further.
Mögliches Duplikat von SVG-Tag mit JavaScript erstellen
– Zeimyth
29. Mai ’16 um 14:24 Uhr
OP, Sie sollen eine Antwort akzeptieren oder erklären, was fehlt.
– Denys Séguret
19. Juli 16 um 4:58 Uhr
Bitte beachten Sie den Kommentar von @DenysSéguret google.com/…
– Alan
4. August 16 um 13:44 Uhr