Si le code svg est en html, il nous est plus facile d'écrire du javascript pour contrôler la transformation des graphiques. Nous introduisons ici quelques éléments de forme prédéfinis de svg. Les amis intéressés pourront s'y référer. utile à tout le monde.
Les fichiers SVG peuvent être intégrés dans des documents HTML à l'aide des balises suivantes :
<embed src="rect.svg" width="300"height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"/>
pluginspage pointe vers l'URL pour télécharger le plug-in.
<object data="rect.svg"width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/"/> <iframe src="rect.svg" width="300"height="100"> </iframe>
Parmi les trois,
Si le code svg est en html, il nous est plus facile d'écrire du javascript pour contrôler la transformation des graphiques :
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Rectangle
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" onclick="ccc();"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:yellow"/> <ellipse cx="220" cy="100" rx="190" ry="20" id="w1" style="fill:white"/> </svg>
Chemin
<script type="text/javascript"> function ccc(){ var a = document.getElementById("w1"); a.style.fill="red"; a.setAttribute("cx", "150"); //设置值 a.setAttribute("ry", "50"); //设置值 } </script>
Ce qui précède est l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter
Html5. tutoriel vidéo,
Tutoriel vidéo SVG
!