Maison >interface Web >Tutoriel H5 >Introduction à l'utilisation des éléments de forme SVG et SVG prédéfinis en HTML

Introduction à l'utilisation des éléments de forme SVG et SVG prédéfinis en HTML

PHPz
PHPzoriginal
2016-05-16 15:49:191594parcourir

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

Cercle30de22e41cb8eb8fbfdc1f091d85e4be 🎜 >Polylinece803ba1a4290bddb3ba9c6f57d4c9b4
<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
!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn