SVG-JavaScript wird nicht richtig gerendert

Timo

Ich habe so viel versucht. Nichts funktioniert. Hilft mir jemand?

Vielen Dank.

var svg = document.createElement("svg");
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");

var line = document.createElement("line");
line.setAttribute("x1", "0");
line.setAttribute("y1", "0");
line.setAttribute("x2", "100");
line.setAttribute("y2", "100");
line.setAttribute("stroke", "black");
line.setAttribute("stroke-width", "4px");

svg.appendChild(line);

document.body.appendChild(svg);

Mr. Polywhirl

Folgendes sollte funktionieren. Erstellen Sie das Element und wenden Sie die Stile an:

Dies macht es so, dass das SVG und seine inneren Formen innerhalb des Bereichs (daher - Namespace ) der SVG und nicht des HTML-Dokuments erstellt werden.

var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
svg.setAttributeNS(null, 'width', '100%');
svg.setAttributeNS(null, 'height', '100%');

var line = document.createElementNS(svgns, "line");
line.setAttributeNS(null, 'x1', 0);
line.setAttributeNS(null, 'y1', 0);
line.setAttributeNS(null, 'x2', 100);
line.setAttributeNS(null, 'y2', 100); 
line.setAttributeNS(null, 'stroke', 'black');
line.setAttributeNS(null, 'stroke-width', 4);
svg.appendChild(line);

document.body.appendChild(svg);

Einfacher, funktioniert aber immer noch:

var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');

var line = document.createElementNS(svgns, "line");
line.setAttribute('x1', 0);
line.setAttribute('y1', 0);
line.setAttribute('x2', 100);
line.setAttribute('y2', 100); 
line.setAttribute('stroke', 'black');
line.setAttribute('stroke-width', 4);
svg.appendChild(line);

document.body.appendChild(svg);

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am
0

Lass mich ein paar Worte sagen

0Kommentare
LoginNach der Teilnahme an der Überprüfung

Verwandte Artikel

TOP Liste

  1. 1

    Hangfire funktioniert nicht wie erwartet mit ASP.NET Core 3.1

  2. 2

    Konvertiert nicht von Methodengruppe in Func <int>

  3. 3

    Wie berechnet man den Gesamtpreis einer Bestellung mit Rails?

  4. 4

    Identifizieren Sie die Werte der ersten Spalte pro ID und arbeiten Sie basierend auf diesem Wert

  5. 5

    Konvertieren Sie eine Textdatei mit mehreren Trennzeichen in CSV

  6. 6

    So greifen Sie auf eine Variable in einer Singleton-Klasse zu, die von einem Modul in Play 2.5 Scala verwendet wird

  7. 7

    So aktualisieren oder aktualisieren Sie alle Fragmente vom Viewpager Android

  8. 8

    Wie implementiere ich die "equals" -Methode für Generika mit "instanceof"?

  9. 9

    Probleme beim numerischen Integrieren einer multivariablen Funktion WRT einer einzelnen Variablen in Julia (mit hcubature)

  10. 10

    Was ist die idiomatischste Rust-Methode, um ein optionales Element eines Vec bedingt zu ändern?

  11. 11

    Printf gibt Zeichen aus, die über die angegebene Länge des Arrays hinausgehen

  12. 12

    So installieren Sie ein privates NPM-Paket über SSH

  13. 13

    findOneAndUpdate mit Push-Array-Elementen gibt Fehler im Mungo

  14. 14

    So verschieben Sie ein Bild in Flutter/Dart mit einem Draggable

  15. 15

    Verwendung eines Winkelmessers für Leistungstests

  16. 16

    Wie erstelle ich ein Objekt für ein Django-Modell mit vielen zu vielen Feldern?

  17. 17

    Beziehungen auf zusammengesetzten Schlüsseln mit sqlalchemy

  18. 18

    c # itextsharp absolute Textposition mehrzeilig

  19. 19

    Wie kann ich eine verschachtelte Schleife mit lapply in R ersetzen?

  20. 20

    Sind die folgenden 3 Möglichkeiten, Objekte zu definieren, identisch?

  21. 21

    Wie konvertiere ich einen Vektor von Bytes (u8) in eine Zeichenfolge?

heißlabel

Archiv