SVG - Muster

SVG verwendet das <pattern> -Element, um Muster zu definieren. Muster werden mit dem <pattern> -Element definiert und dienen dazu, Grafikelemente gekachelt zu füllen.

Erklärung

Es folgt die Syntaxdeklaration von <pattern>Element. Wir haben nur Hauptattribute gezeigt.

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

Attribute

Sr.Nr.	Name & Beschreibung
1	patternUnits- Einheiten zum Definieren des Mustereffektbereichs. Es gibt das Koordinatensystem für die verschiedenen Längenwerte innerhalb des Musters und für die Attribute an, die den Musterunterbereich definieren. Wenn patternUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Elements 'pattern' vorhanden sind. Wenn patternUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des Elements 'pattern' vorhanden sind. Standard ist userSpaceOnUse.
2	patternContentUnits- Einheiten zum Definieren des Musterinhaltsbereichs. Es gibt das Koordinatensystem für die verschiedenen Längenwerte innerhalb des Musters und für die Attribute an, die den Musterunterbereich definieren. Wenn patternContentUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Elements 'pattern' vorhanden sind. Wenn patternContentUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des Elements 'pattern' vorhanden sind. Standard ist userSpaceOnUse.
3	x- x-Achsen-Koordinate des Musterbegrenzungsrahmens. Defeault ist 0.
4	y- y-Achsenkoordinate des Musterbegrenzungsrahmens. Standard ist 0.
5	width- Breite des Musterbegrenzungsrahmens. Standard ist 0.
6	height- Höhe des Musterbegrenzungsrahmens. Standard ist 0.
7	preserveAspectRatio - um das Verhältnis von Breite zu Höhe des Originalinhalts beizubehalten.
8	xlink:href - wird verwendet, um auf ein anderes Muster zu verweisen.

Beispiel

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>

Ein <Muster> -Element, das als Muster1 definiert ist.
Im Muster wird ein Ansichtsfeld definiert und ein Pfad definiert, der als Muster verwendet werden soll.
Im Rect-Element wird im Fill-Attribut die URL des Musters angegeben, um das Rechteck mit dem zuvor erstellten Muster zu füllen.

Ausgabe

Öffnen Sie textSVG.htm im Chrome-Webbrowser. Sie können Chrome / Firefox / Opera verwenden, um SVG-Bilder direkt ohne Plugin anzuzeigen. Internet Explorer 9 und höher unterstützt auch das Rendern von SVG-Bildern.