Maison >interface Web >Tutoriel H5 >Introduction à l'utilisation des éléments de forme SVG et SVG prédéfinis en HTML
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 : d8e2720730be5ddc9c2a3782839e8eb6, 273238ce9338fbb04bee6997e5552b95 ou d5ba1642137c3f32f4f4493ae923989c. L'attribut
<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, d5ba1642137c3f32f4f4493ae923989c est une balise antérieure et est moins utilisée maintenant. La balise la plus couramment utilisée est la balise d8e2720730be5ddc9c2a3782839e8eb6 825a130302ffc3fda1c98272b6043b3f Remplissez le code requis dans la balise :
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">Voici quelques éléments de forme prédéfinis de SVG :
Rectangle4f5c91326734be5b874f0369b6cec59d
<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>Polygone6f1cb7f8499a7e0f625f982868cbc44d
Chemin98953a78f52873edae60a617ec082494
<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
!