Pewarnaan dan Efek dalam Tag SVG

12:06 PM
Jika sudah mempelajari dasar tentang tag SVG dari tulisan saya sebelumnya, selanjutnya kita akan mempelajari tentang cara pewarnaan dan pemberian efeknya. Kita sudah belajar bahwa pewarnaan isi dan garis bisa menggunakan atribut maupun menggunakan style CSS. Sebelumnya, kita juga sudah belajar untuk memberikan warna polos. Kali ini kita akan mempelajari cara pemberian gradien pada objek dalam tag <SVG>.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <svg height="200" width="500">
        <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(255,255,255);
            stop-opacity:0" />
            <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
            </radialGradient>
        </defs>
        <path d="M10 0 A100 100 0 1 1 10 100 Z" fill="url(#grad1)" style="stroke:yellow;stroke-width:4px" />
        <defs>
            <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
            </linearGradient>
        </defs>
        <ellipse cx="300" cy="70" rx="85" ry="55" fill="url(#grad2)" />
    </svg>
</BODY>
</HTML>
Dari contoh di atas, kita bisa melihat bahwa kita memerlukan defs untuk menambahkan efek gradien pada path. Kita juga perlu menggunakan id didalam tag linear gradient maupun gradient, karena atribut fill memerlukan id dari warna gradien yang digunakan. Selain gradien, kita bisa juga memberikan bayangan dan efek blur pada path.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <svg height="400" width="500">
        <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
                <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
            </radialGradient>
        </defs>
        <defs>
            <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
                <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
            </linearGradient>
        </defs>
        <defs>
            <filter id="f1" x="0" y="0">
                <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
            </filter>
        </defs>
        <defs>
            <filter id="f2" x="0" y="0" width="200%" height="200%">
                <feOffset result="offOut" in="SourceGraphic" dx="30" dy="40">
                <feBlend in="SourceGraphic" in2="offOut" mode="normal">
            </filter>
        </defs>
       
        <path d="M10 0 A100 100 0 1 1 10 100 Z" fill="url(#grad1)" style="stroke:yellow;stroke-width:4px" />
        <ellipse cx="300" cy="70" rx="85" ry="55" fill="url(#grad2)" />
        <rect x="0" y="160" width="200" height="100" stroke="gold" stroke-width="3" fill="yellow" filter="url(#f1)" />
        <rect x="210" y="150" width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)">
    </svg>
</BODY>
</HTML>
Pada contoh di atas, kita memberikan blur dan bayangan (dengan feOffset) pada objek. Selain feGaussianBlur dan feBlend, dan feOffset kita juga bisa menggunakan filter-filter lain. Filter-filter yang bisa kita gunakan dalam tag <def> yaitu :
  1. <feBlend>
  2. <feColorMatrix>
  3. <feComponentTransfer>
  4. <feComposite>
  5. <feConvolveMatrix>
  6. <feDiffuseLighting>
  7. <feDisplacementMap>
  8. <feFlood>
  9. <feGaussianBlur>
  10. <feImage>
  11. <feMerge>
  12. <feMorphology>
  13. <feOffset>
  14. <feSpecularLighting>
  15. <feTile>
  16. <feTurbulence>
  17. <feDistantLight>
  18. <fePointLight>
  19. <feSpotLight>

Subscribe to: Post Comments (Atom)