SVG işaretçileri: Hizalı özel ok uçları oluşturun

Bir SVG yoluna özel bir ok ucu eklemek için çizimini bir <marker> içinde tanımlayın ve kimliğine marker-end ile başvurun. refX ve refY değerlerini, çizim üzerinde yolun uç noktasıyla çakışmasını istediğiniz noktanın koordinatlarına ayarlayın. Ardından işaretçinin yolla birlikte dönüp dönmeyeceğini ve kontur kalınlığıyla birlikte büyüyüp büyümeyeceğini seçin.

Bu seçimler farklı sorunları çözer. Bir ok doğru yönü gösterdiği halde bitiş noktasını ıskalayabilir. İnce bir konturda doğru hizalanıp çizgi kalınlaştığında fazla büyük hale de gelebilir. Bu uygulama, tek bir özgün ok şekli üzerinden yerleşimi, yönü ve boyutu ayrı ayrı ele alır.

Küçük ve eksiksiz bir SVG ile başlayın

Aşağıdakini markers.svg olarak kaydedin ve tarayıcıda açın. Ok, 12 × 12 koordinat alanında ucu (11, 6) noktasında olan, elle hazırlanmış bir örnektir. PerfectVector dönüştürme sonucu değildir.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180">
  <defs>
    <marker id="pv-pointer" viewBox="0 0 12 12"
      refX="11" refY="6" markerWidth="6" markerHeight="6"
      markerUnits="strokeWidth" orient="auto-start-reverse">
      <path d="M1 1 L11 6 L1 11 L4 6 Z" fill="#087f82"/>
    </marker>
  </defs>
  <g fill="none" stroke="#20364d" stroke-width="4"
    marker-start="url(#pv-pointer)" marker-end="url(#pv-pointer)">
    <path d="M50 45 H350"/>
    <path d="M50 135 C130 75,260 195,350 135"/>
  </g>
</svg>

İlk yol düzdür; ikincisi bir eğridir. İkisi de her iki uçta aynı işaretçiye başvurur. <defs> bloğu tanımı saklar; yollardaki başvurular ise onu görünür kılar. MDN'nin marker başvurusu, başlangıç, orta ve bitiş noktalarına ekleme özelliklerini ele alır.

İçinde bulunduğu belgede benzersiz olan bir kimlik kullanın. Birden fazla SVG'yi HTML içine gömülü olarak birleştiriyorsanız işaretçi kimliklerine önek ekleyin ve eşleşen tüm url(#...) başvurularını güncelleyin. SVG symbol sprite kılavuzu, yeniden kullanılan simgelerdeki aynı başvuru yönetimi sorununu açıklar.

İstediğiniz noktayı yolun uç noktasına yerleştirin

refX="11" refY="6", işaretçi çiziminin hangi noktasının yolun uç noktasıyla çakışacağını belirtir. Yolun kendisini hareket ettirmez. Bu örnekte o nokta sivri uçtur.

Bunu refX="0" refY="0" ile karşılaştırın. Tarayıcı işaretçinin koordinat orijinini uç noktaya yerleştirir; böylece yatay bir çizgide ok ucu daha sağda ve aşağıda kalır. İşaretçi boyutunu artırmak hatayı daha görünür yapar; bağlantı noktasını düzeltmez.

MDN, refX ve refY değerlerini işaretçinin referans noktası koordinatları olarak belgeler. Gösterilen genişliğinden tahmin yürütmek yerine, viewBox dahil çizimin kendi koordinatlarına göre değerlendirin.

Eksiksiz SVG'yi ayrı olarak açtık ve karşılaştırmayı bir tarayıcıda render ettik. Referans noktasını değiştirmek ucu turuncu çarpının üzerine getirdi. Yönü değiştirmek başlangıç okunu ters çevirdi. Birim modunu değiştirmek, okun çizgiyle birlikte büyüyüp büyümeyeceğini belirledi. Bu gözlemler bu örnek için geçerlidir; dışa aktarılan gerçek dosyayı onu kullanacak uygulamada inceleyin.

Ucu tam uç noktaya sabitlemek, konturun da o noktaya kadar uzanmaya devam etmesi anlamına gelir. Karşılaştırmada görüldüğü gibi kalın bir çizgide, konturun bir bölümü dar ucun yanında görünür kalabilir. Bu birleşme izi önemliyse motifi, bağlantı noktasını veya yolun uç noktasını birlikte ayarlayın ve birleşimi inceleyin. İşaretçinin yerleştirilmesi, alttaki konturu kısaltmaz.

Yönü eğrinin belirlemesini sağlayın

Yolun sonundaki bir ok ucu için orient="auto", yolun o noktadaki yönünü izler. Bir eğrinin bitiş yönü, o noktadaki teğetinden gelir; dolayısıyla okun, yolun iki uç noktası arasındaki düz çizginin yönünü göstermesi gerekmez.

İki uçta da ok kullanmak için orient="auto-start-reverse" ayarlayın. Bitişte auto gibi davranır, ancak başlangıç işaretçisini ek olarak 180 derece döndürür. MDN'nin orient belgesi, bunu iki uçtan da dışarıya doğru bakan tek bir ok ucunu yeniden kullanmanın yolu olarak açıklar.

Sağ üstteki karşılaştırma farkı görünür kılar: auto ile başlangıç oku eğri boyunca bakar. auto-start-reverse ile başlangıçtan dışarıya bakar. Şeklin elle ters çevrilmiş ikinci bir kopyasına ihtiyacınız yoktur.

Sonuç beklediğiniz gibi değilse yol yönünü kontrol edin. Bir yolu ters çevirmek, hangi ucun başlangıç olduğunu değiştirir. Akışı göstermesi amaçlanan bir ok, iki uç ekranda öncekiyle aynı konumda olsa bile bu yöne göre eklenmelidir.

Çizgi kalınlığının işaretçi boyutunu değiştirip değiştirmeyeceğine karar verin

markerUnits, işaretçinin boyutları ve içeriği için kullanılan koordinat sistemini belirler. Varsayılanı strokeWidth, alternatifi ise userSpaceOnUse değeridir. Ayrım için MDN'nin markerUnits başvurusuna bakın.

Ok, viewBox içindeki 12 yatay birimin 10'unu kaplar. markerWidth="6" ve markerUnits="strokeWidth" ile döndürülmemiş genişliği 10 / 12 × 6 × stroke-width olur: 4 birimlik konturda 20 kullanıcı birimi, 8 birimlik konturda ise 40. Sol alttaki karşılaştırmada bu ayarlar kullanılır.

Bu okun her iki kontur kalınlığında da 20 birim genişliğinde kalması için tanımı şöyle değiştirin:

markerUnits="userSpaceOnUse" markerWidth="24" markerHeight="24"

Sağ alttaki karşılaştırmada bu değerler kullanılır. Yalnızca birim modunu değiştirip markerWidth="6" değerini korumak çok daha küçük bir ok oluşturur; çünkü altı birim artık kontur kalınlığıyla çarpılmaz.

userSpaceOnUse, sabit sayıda ekran pikseli anlamına gelmez. Çevresindeki SVG'yi veya koordinat sistemini ölçeklendirmek, gösterilen boyutu yine değiştirebilir. Özellikle büyük bir motif küçük bir diyagram işaretine indirgeniyorsa işaretçiyi son yerleşim boyutunda inceleyin.

Özel bir motifi işaretçi yapmadan önce hazırlayın

Bir üçgen veya basit ok için yolu doğrudan çizin. Mevcut vektör çiziminde özgün yolları koruyun ve çizgiye hangi koordinatın bağlanacağını belirleyin. Bilinçli olarak bırakılmış boşlukları koruyun, hedef boyutta kaybolan ayrıntıları sadeleştirin ve çizime işaretçinin görüntüleme alanında yeterli yer bırakın.

Özel bir ok ucunun veya dekoratif motifin yalnızca PNG veya JPG hali kaldıysa PerfectVector'ın görselden vektöre dönüştürme iş akışı, bu paketleme adımından önce bir SVG adayı elde etmenize yardımcı olabilir. Silüeti ve küçük boşlukları kaynakla karşılaştırın, istenmeyen arka plan şeklini kaldırın; ardından onaylanan çizimin sınırlarını ve bağlantı noktasını seçin. Dönüştürme, işaretçi tanımları oluşturmaz, yol yönünü atamaz veya diyagram bağlantı çizgisi davranışı eklemez.

Test sırasında renkleri açıkça belirtin. Bu örnekte, aralarındaki sınır görünür kalsın diye turkuaz bir işaretçi ve lacivert bir çizgi kullanılır. Kendi okunuzu baştan sona tek renkte istiyorsanız her iki boyamayı da bilinçli olarak ayarlayın ve teslim edilen sonucu inceleyin. SVG renk düzenleme kılavuzu, yeniden renklendirmeyi etkileyebilen sabit dolguları ve stilleri ele alır.

Dosyayı kullanılacağı yerde kontrol edin

Düzenlenebilir bir asıl dosya saklayın; ardından teslim kopyasını gerçek web sitesi, düzenleyici veya dışa aktarım iş akışında test edin. Doğru bir tarayıcı önizlemesi, o dosyanın tarayıcıdaki görünümünü doğrular; her uygulamanın içe aktarma davranışını doğrulamaz.

• Paketleme veya optimizasyondan sonra her url(#...) başvurusunun amaçlanan işaretçi kimliğine yöneldiğini doğrulayın.
• Kullanıyorsanız başlangıç işaretçisi dahil, düz ve eğri yolları kontrol edin.
• Tasarımdaki en ince ve en kalın çizgileri karşılaştırın.
• Ucu, birleşimi ve kırpılan çizim bölümlerini son gösterim boyutunda inceleyin.
• Teslim edilen SVG'yi bağımsız olarak yeniden açın ve kaynak önizlemeyle karşılaştırın.

İşaretçiler, yol üzerindeki konumlara eklenen görünür süslemelerdir. Diyagram nesneleri arasında anlamsal bağlantılar oluşturmazlar. Bir diyagram düzenleyicisinin kendi bağlantı noktaları ve şablon davranışı için yerleşik şekil sistemini kullanın; draw.io özel şekil kılavuzu bu ayrı işi ele alır.

Bir işaretçi, otomatik olarak fiziksel açıdan birleşik bir kesim konturu da oluşturmaz. Hedefiniz kapalı kesim geometrisi gerektiriyorsa bir vektör düzenleyicide yollardan oluşan ayrı bir teslim kopyası hazırlayın ve inceleyin. Ekranda örtüşen bir çizgi ve ok ucu, birleşik bir konturun kanıtı değildir. Daha fazla SVG hazırlık kılavuzu, çizim temizliğini ve sonraki aşamalardaki kontrolleri ele alır.

Sık sorulan sorular

SVG ok ucum neden çizgiden kaymış görünüyor? refX ve refY değerlerini işaretçi çiziminin koordinatlarıyla karşılaştırın. Yolun uç noktasına yerleştirilecek noktayı tanımlarlar. Bu örnekte uç 11,6 noktasındadır; 0,0 kullanmak oraya uç yerine orijini yerleştirir.

Tek bir ok ucunu iki uçta nasıl yeniden kullanırım? marker-start ve marker-end ile aynı işaretçiye başvurun ve orient="auto-start-reverse" kullanın. Başlangıçtaki işaretçi kopyası ters çevrilirken bitişteki kopya yolun yönünü izler.

Çizgiyi kalınlaştırınca ok ucum neden büyüyor? Varsayılan markerUnits değeri strokeWidth'tir. İşaretçinin öğenin kullanıcı koordinatlarında boyutunu koruması gerekiyorsa userSpaceOnUse kullanın; ardından markerWidth ve markerHeight değerlerini o birim sistemine göre ayarlayın.

İşaretçi, oku tek bir kapalı yola dönüştürür mü? Hayır. İşaretçi tanımı, ona başvuran yoldan ayrı kalır. Sonraki kesim veya düzenleme iş akışı gerektiriyorsa gerçekten birleştirilmiş geometriyi hazırlayın ve inceleyin.

Kaynaklar

1. MDN — marker — İşaretçi tanımları, desteklenen şekiller ve ekleme özellikleri.
2. MDN — refX — İşaretçi koordinat sisteminde referans noktasının yatay yerleşimi.
3. MDN — refY — İşaretçi koordinat sisteminde referans noktasının dikey yerleşimi.
4. MDN — orient — Otomatik döndürme ve başlangıçtaki işaretçi kopyasının ters çevrilmesi.
5. MDN — markerUnits — Kontura göre ve kullanıcı koordinatlarına göre boyutlandırma.

Tek bir motifle başlayın; bağlantı noktasını, yönünü ve boyutunu hem bir çizgide hem de bir eğride kontrol edin. Kendi motifiniz yalnızca raster görüntü olarak mevcutsa bir SVG adayı hazırlayın, silüetini ve boşluklarını inceleyin; ardından kabul ettiğiniz yolları bir işaretçi olarak paketleyin.