dynamic svg in html5

Je m'attendais à ce que les nœuds SVG soient des citoyens de première classe en HTML5, mais j'ai un comportement inattendu (sous Firefox 55.0.2 et Chrome 54.0.2840.71).dynamic svg in html5

Dans le fichier html suivant, je m'attends à ce qu'un grand cercle soit dynamiquement ajouté à un élément svg nouvellement créé. Au lieu de cela:

L'inspecteur me dit que le DOM a été correctement modifié
Rien ne s'affiche
lorsque je copie coller DOM (copier -> HTML externe, le script supprimé) dans un nouveau fichier, le résultat statique fichier html est parfaitement bien.

Qu'est-ce qui me manque? Pourquoi ai-je cet écart entre le DOM et la version rendue? Comment puis-je corriger cela? re-dessiner? Lorsque j'utilise des versions suffixées de fonctions NS (par exemple, createElementNS et setAttributeNS), j'obtiens des résultats similaires et rien n'est rendu.

Voici le coupable:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>bug dynamic svg</title> 
    <script type="text/javascript"> 
Element.prototype.grow = function (tag, attribute_map) { 
    var child = document.createElement(tag); 
    if (attribute_map !== undefined) { 
     for (let key in attribute_map) { 
      child.setAttribute(key, attribute_map[key]); 
     } 
    } 
    this.appendChild(child); 
    return child; 
}; 
    </script> 
</head> 
<body> 
<div id="sandbox"><svg viewbox="0 0 200 200"></svg></div> 
<script> 
var g_svg = document.getElementById("sandbox").firstElementChild; 
g_svg.grow('circle', {'cx':"100", 'cy':"100", 'r':"32"}); 
</script> 
</html>

et voici le résultat collé DOM-copie-je obtenir par l'inspecteur (script supprimé manuellement):

<html><head> 
    <meta charset="utf-8"> 
    <title>bug dynamic svg</title> 
</head> 
<body> 
<div id="sandbox"><svg viewBox="0 0 200 200"><circle cx="100" cy="100" r="32"></circle></svg></div> 
</body></html>

Source

2017-08-23 yota

éléments vont dans l'espace de noms SVG , les attributs ne le font généralement pas.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>bug dynamic svg</title> 
 
    <script type="text/javascript"> 
 
Element.prototype.grow = function (tag, attribute_map) { 
 
    var child = document.createElementNS('http://www.w3.org/2000/svg', tag); 
 
    if (attribute_map !== undefined) { 
 
     for (let key in attribute_map) { 
 
      child.setAttribute(key, attribute_map[key]); 
 
     } 
 
    } 
 
    this.appendChild(child); 
 
    return child; 
 
}; 
 
    </script> 
 
</head> 
 
<body> 
 
<div id="sandbox"><svg viewbox="0 0 200 200"></svg></div> 
 
<script> 
 
var g_svg = document.getElementById("sandbox").firstElementChild; 
 
g_svg.grow('circle', {'cx':"100", 'cy':"100", 'r':"32"}); 
 
</script> 
 
</html>

Source

2017-08-23 09:32:31

attributs ... En effet namespaced sont pour 'xml: space' type d'attributs ... Je le savais! Mais j'ai raté ça ... Merci beaucoup^3 ^ – yota

dynamic svg in html5

Répondre

Questions connexes