Nota SVG Örnekleri
Bu örnekte nota svg'leri yarattık. Aşağıda yarattığımız nota'ların görüntüleri görülmekte.
Örnekte önce dörtlük notayı yarattık.
1 <?xml version = "1.0" encoding = "ISO-8859-9" >
2 <svg
3 width = "16px" height = "64px" viewBox = "0 0 100 400"
4 xmlns = "http://www.w3.org/2000/svg" >
5 <defs >
6 <ellipse id = "note" transform = "translate(50 50) rotate(-30)" cx = "0" cy = "0" rx = "52" ry = "38" />
7 </defs >
8 <use x = "0" y = "300" fill = "white" xlink:href = "#note" />
9 </svg >
Bunun için bir elips yaratıldı. Elips -30 derece döndürülerek istenilen nota görüntüsü elde edildi. Bu elips defs elementi içinde tanımlandı ve id="note" ile id verildi. Bu elips diğer notalarda da kullanımıştır. Defs içinde id'si verilen bir element daha sonra use ile kullanılabilir. Yukarıda görüldüğü gibi yarattığımız elips'i
<use x="0" y="300" fill="white" xlink:href="#note"/>
şeklinde kullandık.
ikilik nota svg'si (single_2.svg) bu elips'i kullanmaktadır.
1 <?xml version = "1.0" encoding = "ISO-8859-9" >
2 <svg
3 width = "16px" height = "64px" viewBox = "0 0 100 400"
4 xmlns = "http://www.w3.org/2000/svg" >
5 <g >
6 <use x = "0" y = "300" fill = "white" xlink:href = "Single_1.svg#note" />
7 <line x1 = "94" y1 = "0" x2 = "94" y2 = "350" stroke = "black" stroke-width = "7" />
8 </g >
9 </svg >
<use x="0" y="300" fill="white" xlink:href="single_1.svg#note"/>
satırında görüldüğü gibi başka bir svg dosyasında tanımlanan bir element kullanılabiliyor. Notanın çubuğunu da
<line x1="94" y1="0" x2="94" y2="350" stroke="black" stroke-width="7"/>
ile ekledik.
1 <?xml version = "1.0" encoding = "ISO-8859-9" >
2 <svg
3 width = "16px" height = "64px" viewBox = "0 0 100 400"
4 xmlns = "http://www.w3.org/2000/svg" >
5 <defs >
6 <g id = "onenote" >
7 <use x = "0" y = "300" xlink:href = "Single_1.svg#note" />
8 <line x1 = "94" y1 = "0" x2 = "94" y2 = "350" stroke = "black" stroke-width = "7" />
9 </g >
10 </defs >
11 <use x = "0" y = "0" xlink:href = "#onenote" />
12 </svg >
Tam nota içinde aynı şey geçirli olacaktır. Ancak elips'in içi doldurulmalıdır. Bunun için elips çağrılırken fill="white" özelliği koyulmamıştır. Böylece içi beyaz olmaz ve siyah olur. Tam nota içinde bir tanımlama (def) yarattık. Böylece yarım ve çeyrek notalar için aynı nota kullanılabilecek. id olarak "onenote" verdik
Çeyrek ve yarım notalarda notanın yanına kuyruk işareti(flag) olmalıdır. Bunun için noteflag.svg yaratılmıştır. Bu svg çeyrek ve yarım notalarda kullanılacak flag için yapılmıştır.
1 <?xml version = "1.0" encoding = "ISO-8859-9" >
2 <svg
3 width = "16px" height = "24px" viewBox = "0 0 100 150"
4 xmlns = "http://www.w3.org/2000/svg" >
5 <defs >
6 <path
7 id="flag"
8 d="M 10 0 C-5 60 100,50 40 130"
9 stroke-width = " />
10 </defs >
11
12 <use x = "0" y = "0" xlink:href = "#flag" />
13 </svg >
Bu svg bir path'ten ibarettir. id olarak "flag" verilmiştir. Böylece şeyrek ve yarım notalar bu bayrağı(flag) kullanabilecekler.
1 <?xml version = "1.0" encoding = "ISO-8859-9" >
2 <svg
3 width = "32px" height = "64px" viewBox = "0 0 200 400"
4 xmlns = "http://www.w3.org/2000/svg" >
5 <use x = "0" y = "0" class = "fillNote" xlink:href = "Single_4.svg#onenote" />
6 <use x = "100" y = "0" class = "fillNote" xlink:href = "NoteFlag.svg#flag" />
7 </svg >
Yarım nota yaratmak için
<use x="0" y="0" class="fillNote" xlink:href="Single_4.svg#onenote"/>
ile tam bir nota ve
<use x="100" y="0" class="fillNote" xlink:href="NoteFlag.svg#flag"/>
ile de bayrak(flag) işareti kullanılmıştır.
1 <?xml version = "1.0" encoding = "ISO-8859-9" >
2 <svg
3 width = "32px" height = "64px" viewBox = "0 0 200 400"
4 xmlns = "http://www.w3.org/2000/svg" >
5 <use x = "0" y = "0" class = "fillNote" xlink:href = "Single_4.svg#onenote" />
6 <use x = "100" y = "0" class = "fillNote" xlink:href = "NoteFlag.svg#flag" />
7 <use x = "100" y = "80" class = "fillNote" xlink:href = "NoteFlag.svg#flag" />
8 </svg >
çeyrek nota ise yarımdan tek farkı bir tane daha flag eklenmesidir.
Dosya Listesi
