SVG
Muster

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


Parameter

Parameter Beschreibung
patternUnits Das Koordinatensystem der Musterattribute enthält entweder objectBoundingBox (Standard) oder userSpaceOnUse
patternContentUnits Das Koordinatensystem des Musters enthält entweder objectBoundingBox oder userSpaceOnUse (Standardeinstellung).
patternTransform die Transformation, die auf den Musterinhalt angewendet werden soll
x der x-Versatz des Musters (Standard ist Null)
y der y-Versatz des Musters (Standard ist Null)
Breite die Breite des Musters (erforderlich)
Höhe die Höhe des Musters (erforderlich)
xlink: href Verknüpfung zu einem anderen Muster, das einige Attribute oder Inhalte enthält
erhalteAspectRatio ob das Seitenverhältnis des Musters beibehalten werden soll

Bemerkungen

Standardmäßig wird das Muster gekachelt, indem Sie die Mitte der Mustereinheit in der oberen linken Ecke der Form festlegen.

Beispielmuster mit objectBoundingBox-Einheiten

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

Musterabdeckung mit Kombinationen von patternUnits und patternContentUnits

SVG-Muster verhalten sich beim Ausfüllen gleichartiger Formen deutlich anders als CSS-Hintergrundbilder. Dies kann zu erheblichen Überraschungen für SVG-Neulinge führen. Nachfolgend finden Sie Beispiele für ein Muster, das in allen möglichen Kombinationen von patternUnits und patternContentUnits definiert ist - und zeigen, wie diese Einstellungen das Füllverhalten beeinflussen.

Geben Sie hier die Bildbeschreibung ein 

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

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

Geben Sie hier die Bildbeschreibung ein



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow