En supposant cela :
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
</script>
</head>
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</body>Pourquoi je ne vois rien ?
Je peux voir le cercle dans firefox, en faisant 2 choses :
1) Renommer le fichier de html à xhtml
2) Changez script en
<script type="text/javascript">
$(document).ready(function(){
var obj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
obj.setAttributeNS(null, "cx", 100);
obj.setAttributeNS(null, "cy", 50);
obj.setAttributeNS(null, "r", 40);
obj.setAttributeNS(null, "stroke", "black");
obj.setAttributeNS(null, "stroke-width", 2);
obj.setAttributeNS(null, "fill", "red");
$("svg")[0].appendChild(obj);
});
</script>
La réponse acceptée par Bobince est une solution courte et portable. Si vous avez besoin non seulement d'ajouter des fichiers SVG mais aussi de les manipuler, vous pouvez essayer la solution suivante Bibliothèque JavaScript "Pablo (je l'ai écrit). Il sera familier aux utilisateurs de jQuery.
Votre exemple de code serait alors le suivant :
$(document).ready(function(){
Pablo("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});Vous pouvez également créer des éléments SVG à la volée, sans spécifier de balisage :
var circle = Pablo.circle({
cx:100,
cy:50,
r:40
}).appendTo('svg');
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
