SVG - Motifs

SVG utilise l'élément <pattern> pour définir des motifs. Les motifs sont définis à l'aide de l'élément <pattern> et sont utilisés pour remplir les éléments graphiques en mosaïque.

Déclaration

Voici la déclaration de syntaxe de <pattern>élément. Nous n'avons montré que les principaux attributs.

<pattern
   patternUnits="units to define x,y, width and height attributes."
   patternContentUnits ="units to define co-ordinate system of contents of pattern"
   patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   preserveAspectRatio="to preserve width/height ratio of original content"
   xlink:href="reference to another pattern" >
</pattern>

Les attributs

N ° Sr.	Nom et description
1	patternUnits- unités pour définir la région d'effet des modèles. Il spécifie le système de coordonnées pour les différentes valeurs de longueur dans le motif et pour les attributs définissant la sous-région du motif. Si patternUnits = "userSpaceOnUse", les valeurs représentent les valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément 'pattern' est utilisé. Si patternUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément 'pattern' est utilisé. La valeur par défaut est userSpaceOnUse.
2	patternContentUnits- unités pour définir la région de contenu du modèle. Il spécifie le système de coordonnées pour les différentes valeurs de longueur dans le motif et pour les attributs définissant la sous-région du motif. Si patternContentUnits = "userSpaceOnUse", les valeurs représentent les valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément 'pattern' est utilisé. Si patternContentUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément 'pattern' est utilisé. La valeur par défaut est userSpaceOnUse.
3	x- coordonnée sur l'axe des x de la boîte englobante du motif. Defeault est 0.
4	y- coordonnée sur l'axe y de la boîte englobante du motif. La valeur par défaut est 0.
5	width- largeur du cadre de délimitation du motif. La valeur par défaut est 0.
6	height- hauteur du cadre de délimitation du motif. La valeur par défaut est 0.
sept	preserveAspectRatio - pour préserver le rapport largeur / hauteur du contenu original.
8	xlink:href - utilisé pour désigner un autre modèle.

Exemple

testSVG.htm

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>Sample SVG Pattern</h1>
      
      <svg width="800" height="800">
         
         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 4 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
            </pattern> 
         </defs>
         
         <g>
            <text x="30" y="50" >Using Pattern (Triangles): </text>
            <rect x="100" y="100" width="300" height="300" stroke="green" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 
         
      </svg>
   
   </body>
</html>

Un élément <pattern> défini comme pattern1.
Dans le modèle, une zone de visualisation est définie et un chemin qui doit être utilisé comme modèle est défini.
dans l'élément rect, dans l'attribut fill, l'url du motif est spécifiée pour remplir le rectangle avec le motif créé précédemment.

Production

Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.