SVG - modelli

SVG utilizza l'elemento <pattern> per definire i pattern. I modelli vengono definiti utilizzando l'elemento <pattern> e vengono utilizzati per riempire gli elementi grafici in modo affiancato.

Dichiarazione

Di seguito è riportata la dichiarazione della sintassi di <pattern>elemento. Abbiamo mostrato solo gli attributi principali.

<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>

Attributi

Sr.No.	Nome e descrizione
1	patternUnits- unità per definire la regione dell'effetto dei modelli. Specifica il sistema di coordinate per i vari valori di lunghezza all'interno del modello e per gli attributi che definiscono la sottoregione del modello. Se patternUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente in posizione nel momento in cui viene utilizzato l'elemento 'pattern'. Se patternUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento "pattern". L'impostazione predefinita è userSpaceOnUse.
2	patternContentUnits- unità per definire la regione del contenuto del modello. Specifica il sistema di coordinate per i vari valori di lunghezza all'interno del modello e per gli attributi che definiscono la sottoregione del modello. Se patternContentUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente in posizione nel momento in cui viene utilizzato l'elemento 'pattern'. Se patternContentUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento "pattern". L'impostazione predefinita è userSpaceOnUse.
3	x- Coordinata dell'asse x del riquadro di delimitazione del modello. Il valore predefinito è 0.
4	y- Coordinata dell'asse y del riquadro di delimitazione del modello. L'impostazione predefinita è 0.
5	width- larghezza del riquadro di delimitazione del motivo. L'impostazione predefinita è 0.
6	height- altezza del riquadro di delimitazione del motivo. L'impostazione predefinita è 0.
7	preserveAspectRatio - per preservare il rapporto larghezza / altezza del contenuto originale.
8	xlink:href - usato per riferirsi a un altro modello.

Esempio

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 elemento <pattern> definito come pattern1.
In pattern, viene definita una casella di visualizzazione e viene definito un percorso che deve essere utilizzato come pattern.
nell'elemento rect, nell'attributo fill, l'URL del pattern è specificato per riempire il rettangolo con il pattern creato in precedenza.

Produzione

Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.