Dynamisches Erstellen von SVG-Elementen mit Javascript in HTML

Lesezeit: 4 Minuten

Dynamisches Erstellen von SVG Elementen mit Javascript in HTML
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

Dynamisches Erstellen von SVG Elementen mit Javascript in HTML
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:

h.setAttributeNS(null, 'href', 'http://www.google.com');

Demonstration

  • 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

Dynamisches Erstellen von SVG Elementen mit Javascript in HTML
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
}

Jetzt kannst du schreiben:

svg.appendChild( getNode('rect', { width:200, height:20, fill:'#ff0000' }) );

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.

    – Cee McSharpface

    30. Januar 18 um 11:31 Uhr


Dynamisches Erstellen von SVG Elementen mit Javascript in HTML
Alex Moanga

Fügen Sie dies zu HTML hinzu:

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>

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);

.

570700cookie-checkDynamisches Erstellen von SVG-Elementen mit Javascript in HTML

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy