SVG - Pola

SVG menggunakan elemen <pattern> untuk mendefinisikan pola. Pola didefinisikan menggunakan elemen <pattern> dan digunakan untuk mengisi elemen grafis dengan gaya ubin.

Pernyataan

Berikut ini adalah deklarasi sintaks <pattern>elemen. Kami hanya menunjukkan atribut utama.

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

Atribut

Sr.No.	Nama & Deskripsi
1	patternUnits- unit untuk menentukan wilayah efek pola. Ini menentukan sistem koordinat untuk berbagai nilai panjang dalam pola dan untuk atribut yang menentukan subkawasan pola. Jika patternUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen 'pola' digunakan. Jika patternUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase dari kotak pembatas pada elemen referensi di tempat pada saat elemen 'pola' digunakan. Default-nya adalah userSpaceOnUse.
2	patternContentUnits- unit untuk menentukan wilayah konten pola. Ini menentukan sistem koordinat untuk berbagai nilai panjang dalam pola dan untuk atribut yang menentukan subkawasan pola. Jika patternContentUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen 'pola' digunakan. Jika patternContentUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase dari kotak pembatas pada elemen referensi di tempat pada saat elemen 'pola' digunakan. Default-nya adalah userSpaceOnUse.
3	x- koordinat sumbu x dari kotak pembatas pola. Defeault adalah 0.
4	y- koordinat sumbu y dari kotak pembatas pola. Default-nya adalah 0.
5	width- lebar kotak pembatas pola. Default-nya adalah 0.
6	height- tinggi kotak pembatas pola. Default-nya adalah 0.
7	preserveAspectRatio - untuk mempertahankan rasio lebar / tinggi konten asli.
8	xlink:href - digunakan untuk merujuk ke pola lain.

Contoh

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>

Satu elemen <pattern> didefinisikan sebagai pattern1.
Dalam pola, kotak tampilan ditentukan dan jalur yang akan digunakan sebagai pola ditentukan.
di elemen persegi, di atribut isian, url pola ditentukan untuk mengisi persegi panjang dengan pola yang dibuat sebelumnya.

Keluaran

Buka textSVG.htm di browser web Chrome. Anda dapat menggunakan Chrome / Firefox / Opera untuk melihat gambar SVG secara langsung tanpa plugin apa pun. Internet Explorer 9 dan lebih tinggi juga mendukung rendering gambar SVG.