DERSİMİZ KOD - HTML: svg

svg etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

HTML SVG Gradyanlar (Gradients) - Ders_2 Radial Gradyanlar

SVG Radial Gradyanlar (Radial Gradients)

Bir SVG elemanına, dairesel gradyan eklemak için <radialGradient> elemanı kullanılır.

<radialGradient> elemanı, <defs> elemanının içinde tanımlanmalıdır.

Radial bir gradyanı olan bir elips örneği:

Bu efekti vermek için şu kodları kullanıyoruz:

<svg height="150" 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>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Bu kodların anlamı şudur:

<radialGradient id="grad1" kodları ile, radialGradient elemanına benzersiz bir kimlik atıyoruz. Bu kimlik ile bu gradyanı, çizdiğimiz elipse uygulayacaz.
cx="50%" cy="50%" r="50%" kodları dış daireyi; fx="50%" fy="50%" kodları, iç daireyi tanımlar.
Gradyandaki renk geçişleri, iki veya daha fazla renk kullanılarak yapılır. Her bir renk de <stop> elemanı ile tanımlanır. offset="değer" özelliği, gradyan renginin nerede başlayacağını ya da biteceğini belirler.
fill="url(#grad1)" özelliği ile, elips elemanına hangi gradyanı uygulayacağımız belirledik. Gradyana bir link verdik.

Radial bir gradyanı olan başka bir elips örneği:

Bu efekti vermek için şu kodları kullanıyoruz:

sonraki ders için tıklayınız

HTML SVG Blur Efekti Verme- Filtreleme Ders_2

SVG Blur Efektleri

<defs> ve <filters> Elemanları

Bütün internet SVG filtreleri <defs> elemanının içinde tanımlanır.

<filter> elemanı, özel SVG filtrelerini, efektlerini tanımlar. Her <filter> elemanı, bir id değeri almalıdır. Bu id değeri kullanılarak, efekti çizdiğimiz şekle uygularız.

<feGaussianBlur> SVG Elemanı

<feGaussianBlur> elemanı, svg elemanına blur (bulanıklık) efekti vermek için kullanılır. Aşağıdaki örneğe dikkat edelim:

Bu blur efekti verilmiş svg grafiğinin kodu şöyledir:

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>

Kodların anlamları:

<filter> elemanının id değeri, bu elemanın emsalsiz bir kimlik almasını sağlar.
Blur efeckti <feGaussianBlur> elamanı içinde verilir.
in="SourceGraphic" kodu, blur efektinin, çizilen bütün şekli etkilemesini sağlar.
stdDeviation="15" kodu, blur efektinin bir değer almasını sağlar.
filter="url(#f1)" kodu <rect> elemanına atanarak, blur efektinin bu elemana uygulanması sağlanır.

sonraki ders için tıklayınız

HTML SVG Filtreleme Ders_1

SVG Filtreleme (SVG Filters)

SVG elemanlarına, efect katmak için filtreleme elemanları kullanılır.

SVG filtreleme elemanları tarayıcıların aşağıda belirtilen versiyonlarından itibaren desteklenir:


SVG Filters	8.0	10.0	3.0	6.0	9.6

SVG Filtre Elemanları (Filter Elements)

Bir sonraki derste, svg filtre elemanları ile neler yapılabileceğine dair örnekler vereceğiz.

SVG'de kullanılan filtre elemanarı/efektleri şunlardır:

<feBlend> - filter for combining images (resimleri kombine etmek için)
<feColorMatrix> - filter for color transforms (renk dönüşümü için)
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset> - filter for drop shadows (Gölge efekti için)
<feSpecularLighting>
<feTile>
<feTurbulence>
<feDistantLight> - filter for lighting (ışık efekti için)
<fePointLight> - filter for lighting (ışık efekti için)
<feSpotLight> - filter for lighting (ışık efekti için)

Bir svg elemanında birden çok filtre elemanı kullanabiliriz.

sonraki ders için tıklayınız

HTML SVG Ders_11 Çizim Biçimleri (Strokes)

HTML5 SVG Çizim Biçimleri (Strokes)

SVG, farklı çizim biçimlerine sahiptir. Bu derste, aşağıdaki çizim biçimlerinden bahsedeceğiz:

stroke
stroke-width
stroke-linecap
stroke-dasharray

Bütün bu çizim biçimleri, svg elemanındaki bütün çizgilere uygulanabilir. Bunlar bir düz çizgi, daire çizgisi veya diğer şekillerin çizgileri olabilir.

SVG stroke Özelliği (stroke property)

stroke özelliği, bir çizginin, textin ya da bir geometrik şeklin çizgi rengini belirler. Örneğe dikkat edelim:

Bu kodlar şu çizgileri çizer:

SVG stroke-width Özelliği

stroke-width özelliği, bir çizginin, bir textin kalınlığını belirler. Örneğe dikkat edelim:

Bu kodlar şu çizgileri çizer:

SVG stroke-linecap Özelliği

stroke-linecap özelliği, ucu açık bir çizginin ucuna şekil vermek için kullanılır. Örneğe dikkat edelim:

Bu kodlar şu çizgileri çizer:

SVG stroke-dasharray Özelliği

stroke-dasharray özelliği, kesikli çizgi çizmemizi sağlar. Örneğe dikkat edelim:

Bu kodlar şu çizgileri çizer:

sonraki ders için tıklayınız