Introduction au SVG 2D en HTML5 8 – Résumé de la structure du document et des compétences du didacticiel elements_html5 associées

De nombreux éléments de base ont été introduits auparavant, y compris les combinaisons liées à la structure et les éléments de réutilisation. Ici, nous résumerons brièvement les éléments pertinents restants dans la structure du document SVG, puis passerons à l'appréciation d'autres fonctionnalités de SVG.
Les éléments des documents SVG peuvent essentiellement être divisés dans les catégories suivantes :
•Éléments d'animation : animate, animateColor, animateMotion, animateTransform, set
•Éléments d'explication : desc, métadonnées, titre
•Éléments graphiques : cercle, ellipse, ligne, chemin, polygone, polyligne, rectangle ;
• Éléments structurels : defs, g, svg, symbole, use
• Éléments de dégradé : LinearGradient, radialGradient ; Autres éléments：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view, etc.
Parmi eux, des éléments graphiques, des éléments de dégradé, du texte, des éléments d'image et des combinaisons ont tous été introduits. Voici plusieurs autres éléments liés à la structure.


Élément View-svg Vous pouvez placer n'importe quel autre élément dans n'importe quel ordre dans l'élément svg, y compris les éléments svg imbriqués.
Les attributs couramment utilisés pris en charge par l'élément svg sont id, class, x, y, width, height, viewBox,preserveAspectRatio et les attributs associés de remplissage et de contour.
Les événements pris en charge par l'élément svg sont également couramment utilisés onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload, etc. Pas grand chose à dire sur l'élément svg. Pour une liste complète des attributs et des événements, veuillez vous référer à la documentation officielle plus tard.


Éléments explicatifs-élément desc et élément de titre Chaque élément conteneur (un élément qui peut contenir d'autres éléments conteneurs ou éléments graphiques, tels que : a, defs, glyph, g, Marqueur, masque, glyphe manquant, motif, svg, commutateur et symbole) et les éléments graphiques peuvent contenir des éléments desc et title, qui sont tous deux des éléments auxiliaires utilisés pour expliquer des situations associées. Leur contenu est du texte. Lorsque le document SVG est rendu, ces deux éléments ne seront pas rendus dans le graphique. La différence entre ces deux éléments n'est pas trop grande. Dans certaines implémentations, le titre apparaît comme une information d'invite, donc le titre est généralement placé en première position de l'élément parent.
L'utilisation typique est la suivante :

Copier le codeLe code est le suivant :

< ;svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="4in"height="3in"> ;title>Ventes de l'entreprise par région< ;/title>

Ceci est un tableau qui montre les
ventes de l'entreprise par région



Habituellement, l'élément svg le plus à l'extérieur doit être accompagné d'une description de titre, afin que le programme soit plus lisible.


Élément marqueur-marqueur

Marqueur définit des éléments graphiques (flèches et marqueurs multi-points) attachés à un ou plusieurs sommets (chemin, ligne, polyligne ou sommets de polygone). Les flèches peuvent être créées en attachant un marqueur au point de départ ou d’arrivée d’un chemin, d’une ligne ou d’une polyligne. Les marqueurs multipoints peuvent attacher un marqueur à tous les sommets d'un chemin, d'une ligne, d'une polyligne ou d'un polygone. La marque

est définie par l'élément marqueur, puis définissez simplement les attributs pertinents (marqueur, début du marqueur, milieu du marqueur et fin du marqueur) dans un chemin, une ligne, une polyligne ou un polygone. Prenons un exemple :



Copiez le code

Le code est le suivant :

< ;svgwidth=" 4in"height="2in" viewBox="0040002000"version="1.1" xmlns="http://www.w3.org/2000/svg"> ;defs>

viewBox="001010"refX="0"refY="5"

markerUnits="StrokeWidth"
markerWidth="4"markerHeight=" 3"
orient="auto">



Placer une pointe de flèche sur l'endofapath. ;/desc>
fill="none"Stroke="black"Stroke-width="100"
marker-end="url(#Triangle)"/> ;



Examinons en détail les connaissances liées aux marqueurs :
1. Marker est un élément conteneur qui peut stocker des éléments graphiques, des éléments conteneurs, des animations, des éléments de dégradé, etc.
2. L'élément marqueur peut créer une nouvelle fenêtre de vue : définissez la valeur de la viewBox.
3. Attributs les plus importants du marqueur :
markerUnits="StrokeWidth|userSpaceOnUse"
Cet attribut définit le système de coordonnées utilisé par les attributs MarkerWidth, MarkerHeight et Marker Content. Cet attribut a deux valeurs facultatives. La première valeur, StrokeWidth, est la valeur par défaut, ce qui signifie que les unités du système de coordonnées utilisées par les attributs MarkerWidth, MarkerHeight et le contenu du marqueur sont égales à la valeur définie par Stroke-. largeur de l'élément graphique qui référence le marqueur.

Par exemple, dans l'exemple ci-dessus, la largeur de l'élément marqueur est de 400 et la hauteur est de 300. Cependant, ne vous y trompez pas, les coordonnées utilisées par le chemin dans l'élément mark sont les nouvelles coordonnées utilisateur. système défini par la viewBox.
Une autre valeur de cet attribut est userSpaceOnUse, ce qui signifie que les attributs MarkerWidth, MarkerHeight et le contenu du marqueur utilisent le système de coordonnées de l'élément graphique qui référence le marqueur.
refX, refY : Définit les coordonnées de position du point référencé aligné avec le marqueur. Par exemple, dans l'exemple ci-dessus, le point référencé est le point final et il doit être aligné sur la position (0,5) du marqueur. Notez que refX et refY utilisent le système de coordonnées de l'utilisateur final transformé par viewBox.
markerWidth, MarkerHeight : La largeur et la hauteur de la fenêtre du marqueur. C'est facile à comprendre.
orienter : définit l'angle de rotation du marqueur. Vous pouvez spécifier un angle ou attribuer directement auto.
auto signifie que la direction positive de l'axe des x est tournée selon les règles suivantes  :
a Si le point où se trouve le marqueur n'appartient qu'à un seul chemin, le x positif. -la direction de l'axe du marqueur est la même que la direction du chemin. Voir l'exemple ci-dessus.
b. Si le point où se trouve le marqueur appartient à deux chemins différents, alors la direction positive de l'axe des x du marqueur est cohérente avec la bissectrice angulaire de l'angle entre les deux chemins.
4. Attributs des marqueurs des éléments graphiques

Si un élément graphique veut référencer un marqueur, il doit utiliser des attributs associés, principalement ces trois : marker-start (mettre le marqueur référencé au point de départ) , marqueur-milieu (placez le marqueur référencé à tous les points sauf le point de départ et le point final), marqueur-fin (placez le marqueur référencé au point final). Les valeurs de ces trois attributs peuvent être none (c'est-à-dire ne pas faire référence au marqueur), référence de marqueur (référence à un certain marqueur) et hériter (pas besoin d'en dire plus).
Vous pouvez également voir l'utilisation des marqueurs dans l'exemple ci-dessus.

Élément de script et de style-script et élément de style
En fait, fondamentalement, tous les attributs (pour tous les éléments, pas seulement le texte) peuvent être associés à un élément en utilisant CSS, et tous Les propriétés CSS sont disponibles dans les images SVG. Vous pouvez utiliser directement l'attribut style pour styliser l'élément, ou vous référer à la feuille de style pour styliser l'élément. Les feuilles de style ne doivent pas être analysées pour les fichiers XML (car elles contiennent parfois des caractères pouvant poser problème), elles doivent donc être placées dans une section XMLCDATA. Il en va de même pour les scripts, qui doivent être placés dans la section XMLCDATA. Regardez l'exemple CSS suivant :

Copiez le code

Le code est le suivant :

Text 🎜>
.abbreviation{text-decoration:underline;}
]]>
< /defs>

Les couleurs peuvent être spécifiées ="20"y ="100"font-size="30">par leur
R >G
Bvalues
orbykeywordssuchas

lightsteelblue,


< /svg>


Regardez à nouveau l'exemple de script :

Copiez le code

Le le code est le suivant :

Scriptingtheonclickevent


functionhideReveal(evt){
varimageTarget=evt.target;
vartheFill=imageTarget.getAttribute("fill");
if(theFill=='white')
imageTarget.setAttribute("fill","url(#notes)");
else
imageTarget.setAttribute("fill","white");
}
]]>

patternTransform="rotate(15)"
patternUnits="userSpaceOnUse"> ;

Stroke-width="3"Stroke="black"/>
Stroke-width="3"Stroke="black"/>


fill="url(#notes)"stroke="black" largeur de trait="5"/>

条件处理-switch元素
条件处理属性是能控制所在元素渲染与否的属性。基本上大多数的元素(特别是图形元素)都Il s'agit de la version 3 du modèle : fonctionnalités requises, extensions requises et langage système.指定一个值列表(前面两个属性是空格隔开的，语言这个属性是使用逗号隔开的), 默认值都为true。

SVG的switch元素提供了按指定条件渲染的能力。switch元素是一个容器元素，可以包含图形元素，解释性元素，动画元素，a, ForeignObject,g,image,svg,switch,text,use的的第一个子元素，其他的子元素都会被忽略。这些属性与display属性一样，只会影响直接使用这些属性的元素的渲染，不会影响引用的元素(比如use引用的元素)。简单的说，这3个属性会影响a,altGlyph,étrangerObject, textPath,tref,tspan,animate,animateColor,animateMotion,animateTransform,set就是引用别的元素)。

注意：子元素的affichage et visibilité属性值并不影响switch元素条件判断的结果。
条件处理属性的取值列表参看官方文档，这里就看一个小例子：

复制代码

代码如下 :

x="10"y="10"width="322"height="502"opacité ="0.6"
fill="black"Stroke="none"filter="url(#gblurshadow)"/>
fill="black"Stroke="none"/>

这个例子的意思简单的说就是：使用的浏览器支持filter特性，那么就绘制上面的矩形(带filter属性),如果不支持filter特性，就绘制下面的矩形。
其实更多的时候，用的比较多的属性是systemLanguage，例如：

复制代码

代码如下 :

de-HAHA
fr-haha

实用参考：
脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85 ).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：http://www.chinasvg.com/
官方文档：http://www.w3.org/TR/SVG11/

Déclaration de ce site Web

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