0
Je dessine du SVG en ligne avec JavaScript. Principalement des chemins, mais j'ai aussi essayé un polygone. Je parviens à remplir une balise <svg> avec des chemins (un dans cet exemple simplifié) qui sont corrects SVG. Je le sais parce que:JavaScript SVG inline pas de rendu
- Lorsque le contenu de la balise svg est copié dans un fichier et ouvert dans Inkscape, l'image résultante est comme prévu.
- Si je modifie un
<path>dans l'inspecteur de Firefox d'une manière ou d'une autre, en supprimant l'étiquette de fin</path>(ce qui fait juste que Firefox répare le code tel qu'il était à l'origine), ce chemin particulier s'affichera 't. - Lorsque je copie tout le html dans la page tel qu'il est après l'exécution de javascript, et que je le mets dans un nouveau fichier html, le svg s'affiche correctement.
j'ai couru à l'origine dans ce problème dans Firefox, mais avons aussi vérifier que la création de svg ne fonctionne pas Edge soit.
Alors comment rendre le rendu svg en ligne immédiatement après sa création?
EDIT: Différent de celui-ci: JavaScript and SVG: Error on createElement(). Cette question concerne un document SVG, pas HTML. De plus, je ne reçois aucun message d'erreur.
<html>
<head></head>
<body>
<svg id="drawing"></svg>
<script>
function creel(tagname, id, cla, attrs) {
var n = document.createElement(tagname);
if (id) {
n.id = id;
}
if (cla) {
n.className = cla;
}
if (attrs) {
for (var i = 0; i < attrs.length; i = i + 2) {
n.setAttribute(attrs[i], attrs[i + 1]);
}
}
return n;
}
function drawline(c, ax, ay, bx, by, style) {
// Method for svg
var d = "M" + ax + "," + ay + " L" + bx + "," + by;
var p = creel("path", "", "", ["d", d]);
if (style) {
p.setAttribute("style", style);
} else {
p.setAttribute("style", "stroke:#555555;stroke-width:2; fill:none;");
}
c.appendChild(p);
}
function drawit() {
var c = document.getElementById("drawing");
c.setAttribute("width", 500);
c.setAttribute("height", 500);
c.setAttribute("viewBox", "0 0 500 500");
c.setAttribute("xmlns", "http://www.w3.org/2000/svg");
c.setAttribute("style", "border-style:solid;border-width:1px;background:#eeeeee;");
var thinstyle = "stroke:#555555;stroke-width:2; fill:none;";
drawline(c, 10, 10, 400, 400, thinstyle);
}
window.onload = function() {
drawit();
}
</script>
</body>
</html>
Que vous travailliez avec un document SVG ou un document HTML, vous ne pouvez pas utiliser createElement pour créer des éléments SVG. Non, vous n'obtiendrez pas de message d'erreur car l'utilisation de createElement n'est pas une erreur de syntaxe. –