Zeichnen mit SVG
coder1979
Zeichnen mit SVG
coder1979
Gunnar BittersmannHi,
sorry, das ich grad so viele Fragen stelle, bleibt kein Dauerzustand, versprochen.
Aber das hier plagt mich nun schon seit längerem: In einem Projekt nutze ich SVG um dynamisch ein paar Kuchendiagramme zu zeichnen. Klar könnte ich hier z.B. eine externe Bibliothek wir chart.js verwenden, möchte ich in dem Fall aber nicht.
Hier mal ein Beispielcode, wie ich mit SVG Formen erzeuge:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg width="250" height="250" viewBox="0 0 42 42" id="canvas"></svg>
</body>
<script>
var svgns = "http://www.w3.org/2000/svg";
svg_container = document.getElementById('canvas');
var circle = document.createElementNS(svgns, 'circle');
circle.setAttributeNS(null, 'cx', 21);
circle.setAttributeNS(null, 'cy', 21);
circle.setAttributeNS(null, 'r', 15.91549430918954);
circle.setAttributeNS(null, 'style', 'fill: #f00;');
svg_container.appendChild(circle);
</script>
</html>
Nun zur Frage: Im Javascript-Teil ist ja diese Zeile hier drin:
var svgns = "http://www.w3.org/2000/svg";
Da wird quasi irgendwas verlinkt, was zum Zeichnen benötigt wird, richtig? D.h. wenn dieser Pfad irgendwann geändert wird oder nicht erreichbar ist, wird in meinem Script auch nichts mehr gezeichnet, oder?
Und wenn ich das Skript aufrufe, ohne aktive Internetverbindung wird es wahrscheinlich auch nicht funktionieren, da dann der Pfad ja nicht verfügbar ist.
Da ich in diesem Projekt grundsätzlich ohne Abhängigkeiten arbeiten möchte ist die Frage: Warum braucht man für SVGs diese URL und kann man das irgendwie umgehen (also auch Kreise zeichnen ohne diese URL)?
LG Daniel
-
Hallo coder1979,
Warum braucht man für SVGs diese URL
SVG/Tutorials/Standalone-SVGs#Namensraumangabe
und kann man das irgendwie umgehen (also auch Kreise zeichnen ohne diese URL)?
indem du die Kreise als inline-SVG direkt ins HTML schreibst.
Bis bald!
Jonathan
--
"Es gibt Besserwisser, die niemals begreifen, dass man recht haben kann und trotzdem ein Idiot ist."-
Hi Jonathan,
hast du da ein kleines Beispiel? Ansonsten begeb ich mich mal wieder auf eine kleine Google-Reise ;-)
Beste Grüße
Daniel
-
Moin,
Warum braucht man für SVGs diese URL
Daraus der entscheidende letzte Satz des Abschnitts:
Empfehlung: In HTML5-Dokumenten (siehe: SVG in HTML) können Sie die Angabe eines Namensraums weglassen.
das heißt:
und kann man das irgendwie umgehen (also auch Kreise zeichnen ohne diese URL)?
indem du die Kreise als inline-SVG direkt ins HTML schreibst.
<!-- Hier sind wir noch im HTML-Kontext: --> <body> <figure> <!-- Hier beginnt eine „SVG-Insel“: --> <svg viewBox="0 0 100 100"> <rect x="0" y="0" width="100" height="100"/> <circle cx="50" cy="50" r="50"/> </svg> <!-- … und zurück in HTML --> <figcaption>„Die Quadratur (?) des Kreises (??).“</figcaption> </figure> </body>Viele Grüße
Robert-
@@Robert B.
Daraus der entscheidende letzte Satz des Abschnitts:
Empfehlung: In HTML5-Dokumenten (siehe: SVG in HTML) können Sie die Angabe eines Namensraums weglassen.
Warum das als Empfehlung da steht, erschließt sich mir nicht. Ich würde das Weglassen des SVG-Namensraumes in HTML nicht unbedingt empfehlen.
Aber was soll der Satz da überhaupt in einem Tutorial zu Standalone-SVGs, also eben genau nicht zu SVG in HTML? Kann weg.
BTW, der Link zu „SVG in HTML“ ist kaputt.
🖖 Живіть довго і процвітайте
--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix -
Hi,
klasse, Danke dir!
Schönen Tag allen.
-
-
-
@@coder1979
Im Javascript-Teil ist ja diese Zeile hier drin:
var svgns = "http://www.w3.org/2000/svg";
Da wird quasi irgendwas verlinkt
Nein, nicht wirklich. Das ist der SVG-Namensraum – ein URI, aber kein Link.
was zum Zeichnen benötigt wird, richtig?
Ja, die Angabe des Namensraums wird benötigt, wie ich letztens lernte (36 ff.).
D.h. wenn dieser Pfad irgendwann geändert wird
Der SVG-Namensraum wird nicht geändert.
oder nicht erreichbar ist
Der URI muss nicht im Web erreichbar sein; es ist kein Link.
🖖 Живіть довго і процвітайте
--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix-
OK, das bedeutet quasi, ich kann das ohne Probleme auch so lassen und der Code läuft auch in 10 Jahren noch. Dann brauch ich auch nichts auf Inline-HTML umschreiben sondern halt die Füße still.
Auch gut ;-)
-
@@coder1979
OK, das bedeutet quasi, ich kann das ohne Probleme auch so lassen und der Code läuft auch in 10 Jahren noch.
Ja.
Dann brauch ich auch nichts auf Inline-HTML umschreiben sondern halt die Füße still.
Na, bei unveränderlichen Teilen ist es unsinnig, sie per JavaScript ins DOM zu setzten. Die sollten gleich im Markup stehen.
Wo wir beim JavaScript sind:
var circle = document.createElementNS(svgns, 'circle');Bei Elementen brauchst du
createElementNS()mitNSund Angabe des SVG-Namensraums.circle.setAttributeNS(null, 'cx', 21); circle.setAttributeNS(null, 'cy', 21); circle.setAttributeNS(null, 'r', 15.91549430918954); circle.setAttributeNS(null, 'style', 'fill: #f00;');Bei Attributen nicht. Da kannst du
setAttribute()ohneNSverwenden. Siehe das bereits angegebene Beispiel.🖖 Живіть довго і процвітайте
--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix
-
-