Bu özellik bir yolu tanımlar.
Kullanım
Kategori Yolu tanım özellikleri
değer
Değişkenlik Evet
Spesifikasyon Dokümantasyonu SVG 1.1 (2. Baskı)
d özelliği aslında bir dizi yol tanımı içeren bir dizidir. Bu yollar aşağıdaki talimatlardan oluşur:
- Taşınma
- Lineto
- Curveto
- Arcto
- ClosePath
Bunlar bir iple birleştirilir. Bu farklı komutlar beve duyarlıdır; Büyük harf komutu parametrelerinin mutlak konum olduğunu, küçük harfler ise mevcut konuma göre bir noktayı gösterir. Komut için bir parametre olarak negatif bir değer belirtilebilir: negatif açı saat yönünün tersine olacak ve mutlak x ve y konumları negatif koordinat olarak kabul edilir. Negatif göreli x değeri sola hareket ederken, negatif göreli y değeri yukarı hareket eder.
Taşınma
Moveto komutu, bir çizim kalemi alıp başka bir yere inmek şeklinde düşünülebilir. Önceki nokta ile bu belirlenen nokta arasında çizgi kesimi çizilmemiştir. Bir Moveto komutuyla yol başlatmak iyi bir fikirdir, çünkü başlatılmış bir Moveto olmadan, başlangıç noktası önceki işlemin gerçekleştiği yer olur ve bu da belirsiz davranışa yol açabilir.
Sözdizim:
M x,y burada x ve y, sırasıyla yatay ve dikey koordinatları temsil eden mutlak koordinatlardır.
m dx, dy burada dx ve dy, sırasıyla sağa ve aşağıya doğru mevcut noktaya göre mesafelerdir.
Örnek:
Mutlak konumda x=50, y= 100:<yol d="M50,100..." />
50 sola, 100 aşağıya hareket et: <yol d="m50,100..." />
Lineto
Moveto komutunun aksine, Lineto komutu düz bir segment çizer. Bu düz çizgi segmenti, mevcut konumdan belirlenen konuma hareket eder. Yerel Lineto komutunun sözdizimi "L x, y" veya "l dx, dy"dir; burada x ve y mutlak koordinatlardır, dx ve dy ise sırasıyla sağa ve aşağıya olan mesafelerdir. Ayrıca yatay ve dikey hareketleri belirten H ve V harfleri de vardır. Sözdizimleri L ile aynı ve küçük harfleri göreceli mesafe, büyük harf versiyonu mutlak konumdur.
Curveto
Curvto komutu bir Bézier eğrisi belirtir. İki tür Bézier eğrisi vardır: kübik ve kuadratik. Bir kuadratik Bézier eğrisi, kontrol noktasının iki ucu aynı olan özel bir kübik Bézier eğrisidir. Bir kuadratik Bézier eğrisinin sözdizimi "Q cx, cy x, y" veya "q dcx, dcy dx, dy"dir. Cx ve Cy kontrol noktalarının mutlak koordinatlarıdır, DCX ve DCY ise sırasıyla X ve Y yönlerindeki kontrol noktalarının mesafeleridir.
Kübik Bézier eğrisi, kuadratik Bézier eğrisiyle aynı kavramı takip eder, ancak iki kontrol noktasını dikkate almalıdır. Kübik Bézier eğrisinin sözdizimi şöyledir: "C c1x, c1y c2x, c2y x, y" veya "c dc1x, dc1y dc2x, dc2y dx, dy"; burada c1x, c1y ve c2x, c2y sırasıyla başlangıç ve bitiş noktalarının kontrol noktalarının mutlak koordinatlarıdır. DC1X, DC1Y ve DC2X, DC2Y başlangıç noktasına görecelidir, bitiş noktasına değil. DX ve DY, sırasıyla sağa ve aşağıya olan mesafelerdir.
Düzgün Bézier eğrilerini bağlamak için T ve S komutlarını da kullanabilirsiniz. Sözdizimi, diğer Curveto komutlarından daha basittir çünkü ilk kontrol noktasının önceki kontrol noktasının önceki kontrol noktası üzerindeki yansıması olduğunu veya önceki kontrol noktası yoksa aslında önceki nokta olduğunu varsayar. T'nin sözdizimi "T x,y" veya "t dx,dy"dir; bu, sırasıyla mutlak koordinatlara ve göreceli mesafelere karşılık gelir ve kuadratik bir Bézier eğrisi oluşturmak için kullanılır. S, kübik bir Bézier eğrisi oluşturmak için kullanılır; sözdizimi "S cx, cy x, y" veya "s dcx, dcy dx, dy"dir, burada (d)cx ikinci kontrol noktasını belirtir.
Son olarak, tüm Bézier eğrisi komutları çok taraflı bir Bézier grafiği oluşturabilir, önce komutu başlatabilir ve ardından tüm parametreleri birden fazla kez belirterek çok yönlü bir Bézier grafiği oluşturulabilir. Bu nedenle, aşağıdaki iki komut tam olarak aynı yolu oluşturabilir:
Arcto
Bazen eliptik yay eğrisi yolunu tanımlamak, Bézier eğri yolundan daha basit olur. Sonuç olarak, yol öğesi Arcto komutunu destekler. Yayın merkezi diğer değişkenlerle hesaplanır. Arcto bildirisi, Visual Studio'nun biraz tekrarı gibidir: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Çözüme girdiğimizde, rx ve ry sırasıyla x ve y yönlerindeki yarıçaplardır ve LargeArcFlag değeri 0 veya 1'dir; bu değer küçük bir yay (0) mi yoksa büyük bir yay (1) mi çizileceğini belirler. SweepFlag ayrıca 0 veya 1 olur; bu da yayın saat yönünde (1) mi yoksa saat yönünün ters yönünde (0) mı olduğunu belirlemek için kullanılır. x ve y, varış noktasının koordinatlarıdır. xAxisRotate, x ekseninin mevcut referans çerçevesine göre yönünü değiştirmeyi desteklese de, bu parametrenin Gecko 7'de pek etkisi yok gibi görünmektedir.
ClosePath
ClosePath komutu ise mevcut noktadan mevcut yolun ilk noktasına doğru bir çizgi çizer. En basit komuttur ve hiçbir parametre içermez. Başlangıç noktasına en kısa doğrusal yolu takip eder ve eğer bu yolda başka yollar bulunursa, olası yollar kesişir. Sözdizimi "Z" veya "z"dir ve her iki yazım yöntemi de aynı işlevi taşır.
element
Aşağıdaki öğeler d niteliğini kullanabilir:
Aynı kurallar <animate>animasyon yollarına da uygulanabilir.
Hatırlatma
Orijin (koordinat sistemi 0,0 nokta) genellikle bağlamın sol üst köşesidir. Ancak <glyph>elementin kökeni, mektup kutusunun sol alt köşesindeydir.
İki sayı arasında virgül kullanılmasına izin verilir, ancak başka hiçbir yerde olmaz.
örnek
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="koruma">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
d="M37,17v15H14V17H37z M50,0H0v50h50V0z"nin aslında ne anlama geldiğini göstermek için, bu dizinin her alt paragrafını tartışalım.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Bu özellik, tüm SVG'yi oluşturan dizileri içerir.
M37,17
M, MoveTo'nun kısaltmasıdır. Büyük "M" mutlak koordinatları, küçük harfi ise göreli mesafeyi ifade eder. Bu, başlangıç koordinatlarına dayandığını, çizginin kutunun içinde olduğunu ve kutunun içindeki dikdörtgenin sağ üst köşesinden başladığını ima eder.
37, X ekseninde 37 piksel olan başlangıç svg konumunun kısaltmasıdır.
17 Svg pozisyonunu başlatın, y ekseninde 17 pikselde.
v15
V, dikey anlamına gelir. Büyük V harfi mutlak koordinatları, küçük V ise göreli uzunluk ve mesafeyi gösterir. dx/dy ve x/y karşılık gelen H/V ve h/v pozisyonlarında kullanılabilir.
Burada, belirli bir koordinata göre 15 piksellik dikey bir çizgi çizilerek gösterilir. Bu, 37,32 koordinatlarına kadar 15 piksel çizmeniz anlamına gelir.
H14
H, büyük harfle yazılmış ve mutlak koordinatlar anlamına gelen seviyeyi ifade eder.
v15'in sonundan itibaren, mutlak koordinat 14'e ulaşana kadar yatay bir çizgi çizin ve x-koordinat 14'e ulaştığında çizgi çizimi sonlandırın. Çizgiler koordinatlar 14,32 koordinatlarında yer almaktadır.
V17
Daha önce olduğu gibi, önceki çizginin ucundan başlayın ve y eksenli koordinat 17'ye ulaşana kadar dikey bir çizgi çizin. Çizgiler koordinatlar 14,17'de yer alır.
H37
Son olarak, 14,17'den başlayarak yatay bir çizgi çizerek x ekseni koordinatı 37'ye ulaşın. Çizgi, 37,17 (M değeri) koordinatlarında yer alır
z
Hem küçük hem de büyük Z harfleri, bir dizi SVG segmentini kapatır.
,
Bir virgül, basit vektör grafik segmentlerinden oluşan bir sonraki diziyi başlatır. Bir sonraki basit vektör çizgi segmentleri serisi dış kutuyu oluşturacaktır.
M50,0
X ekseni 50 ve y ekseni 0'dan başlayın.
H0
(0,0)'a kadar düz bir çizgi çizin.
v50
50'ye göre 0,0 piksellik dikey bir çizgi çizin. Bu çizgi (0,50) olarak çizilecektir.
H50
(0,-50) ile karşılaştırıldığında 50 piksellik yatay bir çizgi çizin. Bu çizgi sağa çekilir (50,50).
V0
Y eksenli koordinat 0'a ulaşana kadar dikey bir çizgi çiz. Bu, M'nin değeri olan (50,0) çizgisi çizer.
z
Hem küçük hem de büyük Z harfleri, bir dizi SVG segmentini kapatır.
Kodu ekleyin:
Son olarak, belgeye bağlantı eklenmiştir: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Yayınlandı 4.05.2018 11:29:47
|
|
|
|
