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.