SVG
Patterns

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
Ricerca…


Parametri

parametro descrizione
patternUnits il sistema di coordinate degli attributi del modello è objectBoundingBox (predefinito) o userSpaceOnUse
patternContentUnits il sistema di coordinate dei contenuti del pattern sia objectBoundingBox o userSpaceOnUse (predefinito)
patternTransform la trasformazione da applicare ai contenuti del pattern
X l'offset x del modello (l'impostazione predefinita è zero)
y l'offset y del modello (il valore predefinito è zero)
larghezza la larghezza del modello (richiesto)
altezza l'altezza del modello (richiesto)
xlink: href link a un altro pattern che fornisce alcuni attributi o contenuti
preserveAspectRatio se le proporzioni del modello devono essere preservate

Osservazioni

Per impostazione predefinita, il motivo verrà affiancato impostando la parte centrale dell'unità motivo nell'angolo in alto a sinistra della forma.

Esempio di modello con unità objectBoundingBox

<svg width="400" height="400">
<defs>
  <pattern id="pattern1" width="0.2" height="0.2" patternUnits="objectBoundingBox">
      <circle cx="10" cy="10" r="10" fill="#0000ff" />
  </pattern>
</defs>

<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
</svg>

Copertura del pattern con combinazioni di patternUnits e patternContentUnits

I pattern SVG si comportano in modo significativamente diverso rispetto alle immagini di sfondo CSS quando si riempiono forme equivalenti. Questo può portare a sorprese significative per i neofiti di SVG. Di seguito sono riportati alcuni esempi di pattern definiti in tutte le possibili combinazioni di patternUnits e patternContentUnits, che mostrano come queste impostazioni influenzano il comportamento di riempimento.

inserisci la descrizione dell'immagine qui 

<svg width="800px" height="800px">
<defs>
<pattern id="pattern1" x="0" y="0" width="0.2" height="0.2"  patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" fill="blue" />
  </pattern>
  
    <pattern id="pattern2" x="10" y="10" width="20" height="20"  patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">
      <circle cx=".1" cy=".1" r="0.1" fill="blue" />
  </pattern>
  
    <pattern id="pattern3" x="10" y="10" width="20" height="20"  patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" fill="blue" />
  </pattern>
  
    <pattern id="pattern4" x="0" y="0" width="0.2" height="0.2"  patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
      <circle cx=".1" cy=".1" r="0.1" fill="blue" />
  </pattern>
</defs>

<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
<rect x="150" y="10" width="200" height="150" stroke="black" fill="url(#pattern1)"/>
  <text x="10" y="200">patternUnits="objectBoundingBox" (20% of shape)</text> 
  <text x="10" y="220">patternContentUnits="userSpaceOnUse" (20px circle) </text>
  <text x="10" y="240" stroke="blue" stroke-width="1">(Units used by default)</text>
  
<rect x="10" y="310" width="100" height="100" stroke="black" fill="url(#pattern3)"/>
<rect x="150" y="310" width="200" height="150" stroke="black" fill="url(#pattern3)"/>
  <text x="10" y="500">patternUnits="userSpaceOnUse" (10px square box)</text> 
  <text x="10" y="520">patternContentUnits="userSpaceOnUse" (20px circle) </text>
  
<rect x="410" y="10" width="100" height="100" stroke="black" fill="url(#pattern2)"/>
<rect x="550" y="10" width="200" height="150" stroke="black" fill="url(#pattern2)"/>
  <text x="410" y="200">patternUnits="userSpaceOnUse" (10px square box)</text> 
  <text x="410" y="220">patternContentUnits="objectBoundingBox"(radius="10%") </text>
  
<rect x="410" y="310" width="100" height="100" stroke="black" fill="url(#pattern4)"/>
<rect x="550" y="310" width="200" height="150" stroke="black" fill="url(#pattern4)"/>
  <text x="410" y="500">patternUnits="objectBoundingBox" (20% of shape)</text> 
  <text x="410" y="520">patternContentUnits="objectBoundingBox"(radius="10%")  </text>
  
</svg>

patternTransform esempi

<svg width="800px" height="800px">
<defs>
<pattern id="pattern1" x="0" y="0" width="0.2" height="0.2" >
      <circle cx="10" cy="10" r="10" fill="blue" />
  </pattern>
  
  <pattern id="pattern2" x="0" y="0" width="0.2" height="0.2" patternTransform="scale(1.5)">
      <circle cx="10" cy="10" r="10" fill="blue" />
  </pattern>
  
  <pattern id="pattern3" x="0" y="0" width="0.2" height="0.2"   patternTransform="skewX(45)">
      <circle cx="10" cy="10" r="10" fill="blue" />
  </pattern>
  
  <pattern id="pattern4" x="0" y="0" width="0.2" height="0.2"  patternTransform="matrix(1.5,-.70,.10,1.1,-30,10)">
      <circle cx="10" cy="10" r="10" fill="blue" />
  </pattern>
  

</defs>

<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
<rect x="150" y="10" width="200" height="150" stroke="black" fill="url(#pattern1)"/>
  <text x="10" y="200">Original</text> 
  
<rect x="410" y="10" width="100" height="100" stroke="black" fill="url(#pattern2)"/>
<rect x="550" y="10" width="200" height="150" stroke="black" fill="url(#pattern2)"/>
  <text x="410" y="200">patternTransform="scale(1.5)"</text> 
  
<rect x="10" y="310" width="100" height="100" stroke="black" fill="url(#pattern3)"/>
<rect x="150" y="310" width="200" height="150" stroke="black" fill="url(#pattern3)"/>
  <text x="10" y="500">patternTransform="skewX(45)"</text> 
  
<rect x="410" y="310" width="100" height="100" stroke="black" fill="url(#pattern4)"/>
<rect x="550" y="310" width="200" height="150" stroke="black" fill="url(#pattern4)"/>
  <text x="410" y="500">patternUnits="matrix(1.5,-.70,.10,1.1,-30,10)"</text> 
  
</svg>

inserisci la descrizione dell'immagine qui



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow