SVG Özellikler 4

by Erdinç Uzun

HTML

<svg width="500px" height="120px">
  <!-- fill işlemi yok (geçerli renk olarak #000000 yani siyah renk gösterilir.)-->
  <rect id="myRect1" x="10px" y="10px" width="100px" height="100px" />
  <!--class üzerinden CSS bağlanarak-->
  <rect id="myRect2" x="120px" y="10px" width="100px" height="100px" class="bluerect"/>
  <!--style özelliği üzerinden CSS işlemi-->	
  <rect id="myRect3" x="230px" y="10px" width="100px" height="100px" style="fill:pink; hover:yellow"/> 
  <!--Direkt özelliği etiket içinden kullanma. (Önceki örnekler gibi)-->	
  <rect id="myRect4"  x="340px" y="10px" width="100px" height="100px" fill="red"/>
</svg>

CSS

rect.bluerect {fill:blue;}
rect:hover {fill:yellow;}