Marker SVG: Buat Kepala Panah Khusus yang Tetap Sejajar

Untuk menempelkan kepala panah khusus pada path SVG, definisikan artwork-nya di dalam <marker> dan rujuk ID-nya dengan marker-end. Atur refX dan refY ke titik pada artwork yang harus bertemu dengan titik akhir path. Kemudian pilih apakah marker harus berputar mengikuti path dan membesar mengikuti lebar stroke-nya.

Pilihan tersebut menyelesaikan masalah berbeda. Panah dapat mengarah dengan benar tetapi masih meleset dari titik akhirnya. Panah juga dapat sejajar dengan benar pada stroke tipis, lalu menjadi terlalu besar ketika garis menebal. Panduan ini memisahkan penempatan, arah, dan ukuran menggunakan satu bentuk penunjuk orisinal.

Mulai dengan SVG kecil dan lengkap

Simpan yang berikut sebagai markers.svg dan buka di browser. Penunjuk merupakan contoh buatan tangan, dengan ujung pada (11, 6) di dalam ruang koordinat 12 × 12. Ini bukan hasil konversi PerfectVector.

<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>

Path pertama lurus; yang kedua adalah kurva. Keduanya merujuk marker yang sama pada kedua ujung. Blok <defs> menyimpan definisi, sedangkan referensi path membuatnya terlihat. Referensi marker MDN membahas properti penempelan awal, tengah, dan akhir.

Gunakan ID yang unik dalam dokumen yang menampungnya. Jika Anda menggabungkan beberapa SVG inline, tambahkan prefiks pada ID marker-nya dan perbarui setiap referensi url(#...) yang cocok. Panduan sprite simbol SVG menjelaskan masalah pengelolaan referensi yang sama untuk ikon yang digunakan ulang.

Letakkan titik yang dimaksudkan pada titik akhir

refX="11" refY="6" menyatakan titik artwork marker yang harus berimpit dengan titik akhir path. Atribut itu tidak memindahkan path sendiri. Dalam contoh ini, titik tersebut adalah ujung tajam.

Bandingkan dengan refX="0" refY="0". Browser menempatkan titik asal koordinat marker pada titik akhir, sehingga ujungnya berada lebih jauh ke kanan dan ke bawah pada garis horizontal. Memperbesar ukuran marker membuat kesalahan lebih terlihat; hal itu tidak memperbaiki titik penempelan.

MDN mendokumentasikan refX dan refY sebagai koordinat titik referensi marker. Baca keduanya terhadap koordinat artwork itu sendiri, termasuk viewBox-nya, alih-alih menebak dari lebar tampilannya.

Kami membuka SVG lengkap secara terpisah dan merender perbandingan di browser. Mengubah titik referensi membawa ujung ke tanda silang oranye. Mengubah orientasi membalik panah awal. Mengubah mode unit mengendalikan apakah penunjuk membesar bersama garis. Pengamatan ini berlaku untuk contoh ini; periksa file hasil ekspor sebenarnya dalam aplikasi yang akan menerimanya.

Ujung yang ditambatkan tepat pada titik akhir juga membiarkan stroke memanjang hingga titik itu. Pada garis tebal, sebagian stroke dapat tetap terlihat di samping ujung sempit, seperti yang ditunjukkan perbandingan. Jika sambungan itu penting, sesuaikan motif, titik penempelan, atau titik akhir path bersama-sama dan periksa sambungannya. Penempatan marker tidak memangkas stroke yang mendasarinya.

Biarkan kurva mengendalikan arah

Untuk kepala panah pada akhir path, orient="auto" mengikuti arah path pada titik tersebut. Arah akhir kurva berasal dari garis singgung lokalnya, sehingga panah tidak harus menunjuk ke arah garis lurus antara dua titik akhir path.

Untuk panah pada kedua ujung, gunakan orient="auto-start-reverse". Atribut ini berperilaku seperti auto pada akhir tetapi memutar marker awal sebesar tambahan 180 derajat. Dokumentasi orient MDN menjelaskan ini sebagai cara menggunakan ulang satu kepala panah yang mengarah ke luar dari kedua ujung.

Perbandingan kanan atas membuat perbedaannya terlihat: dengan auto, penunjuk awal menghadap sepanjang kurva. Dengan auto-start-reverse, penunjuk menghadap menjauhi awal. Anda tidak membutuhkan salinan kedua bentuk yang dibalik secara manual.

Periksa arah path ketika hasilnya mengejutkan Anda. Membalik path mengubah ujung mana yang menjadi awalnya. Panah yang dimaksudkan untuk menunjukkan aliran harus ditempelkan sesuai arah tersebut, meskipun kedua ujung kebetulan menempati posisi layar yang sama seperti sebelumnya.

Tentukan apakah ketebalan garis harus mengubah ukuran marker

markerUnits menetapkan sistem koordinat yang digunakan untuk dimensi dan konten marker. Defaultnya adalah strokeWidth; alternatifnya adalah userSpaceOnUse. Lihat referensi markerUnits MDN untuk perbedaannya.

Penunjuk membentang 10 dari 12 unit horizontal dalam viewBox-nya. Dengan markerWidth="6" dan markerUnits="strokeWidth", lebar tanpa rotasinya adalah 10 / 12 × 6 × stroke-width: 20 unit pengguna pada stroke 4 unit dan 40 pada stroke 8 unit. Perbandingan kiri bawah menggunakan pengaturan tersebut.

Untuk menjaga penunjuk itu tetap selebar 20 unit pada kedua ketebalan stroke, ubah definisinya menjadi:

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

Perbandingan kanan bawah menggunakan nilai tersebut. Mempertahankan markerWidth="6" sambil mengubah hanya mode unit akan menghasilkan penunjuk jauh lebih kecil, karena enam unit tidak lagi dikalikan dengan lebar stroke.

userSpaceOnUse tidak berarti jumlah piksel layar yang tetap. Menskalakan SVG di sekitarnya atau sistem koordinatnya masih dapat mengubah ukuran tampilan. Periksa marker pada ukuran tata letak akhir, terutama ketika motif besar diperkecil menjadi anotasi diagram kecil.

Siapkan motif khusus sebelum menjadikannya marker

Untuk segitiga atau penunjuk sederhana, gambar path secara langsung. Untuk artwork vektor yang sudah ada, pertahankan path asli dan tentukan koordinat mana yang harus menempel pada garis. Pertahankan lubang yang disengaja, sederhanakan detail yang menghilang pada ukuran yang dimaksudkan, dan berikan artwork ruang yang cukup di dalam viewport marker.

Jika kepala panah khusus atau motif dekoratif hanya tersisa sebagai PNG atau JPG, alur kerja gambar-ke-vektor PerfectVector dapat membantu memulihkan kandidat SVG sebelum langkah pengemasan ini. Bandingkan siluet dan bukaan kecil dengan sumber, hapus bentuk latar belakang yang tidak diinginkan, lalu pilih batas dan titik penempelan artwork yang diterima. Konversi tidak membuat definisi marker, menetapkan arah path, atau menambahkan perilaku konektor diagram.

Pertahankan warna eksplisit saat menguji. Contoh ini menggunakan marker hijau kebiruan dan garis biru tua agar batasnya tetap terlihat. Jika panah Anda sendiri harus satu warna seluruhnya, tetapkan kedua pewarnaan secara sengaja dan periksa hasil yang diserahkan. Panduan pengeditan warna SVG membahas isian tetap dan gaya yang dapat mengganggu pewarnaan ulang.

Periksa file di tempat penggunaannya

Simpan master yang dapat diedit, lalu uji salinan penyerahan melalui situs web, editor, atau alur kerja ekspor sebenarnya. Pratinjau browser yang benar membuktikan tampilan file tersebut di browser; hal itu tidak membuktikan perilaku impor setiap aplikasi.

• Pastikan setiap url(#...) menunjuk ke ID marker yang dimaksudkan setelah pengemasan atau optimasi.
• Periksa path lurus dan melengkung, termasuk marker awal jika Anda menggunakannya.
• Bandingkan ketebalan garis paling tipis dan paling tebal dalam desain.
• Periksa ujung, sambungan, dan artwork yang terpotong pada ukuran tampilan akhir.
• Buka kembali SVG yang diserahkan secara mandiri dan bandingkan dengan pratinjau sumber.

Marker adalah dekorasi terlihat yang ditempelkan pada posisi path. Marker tidak membuat hubungan semantis antara objek diagram. Untuk titik koneksi dan perilaku stencil editor diagram itu sendiri, gunakan sistem bentuk aslinya; panduan bentuk khusus draw.io membahas tugas terpisah itu.

Marker juga tidak otomatis menjadi outline pemotongan yang tergabung secara fisik. Jika tujuan membutuhkan geometri potong tertutup, siapkan dan periksa salinan penyerahan berbasis path terpisah dalam editor vektor. Garis dan kepala panah yang tumpang tindih di layar bukan bukti kontur yang disatukan. Panduan persiapan SVG lainnya membahas pembersihan artwork dan pemeriksaan tahap berikutnya.

FAQ

Mengapa kepala panah SVG saya bergeser dari garis? Periksa refX dan refY terhadap koordinat artwork marker. Keduanya mengidentifikasi titik yang ditempatkan pada titik akhir path. Dalam contoh ini, ujung berada pada 11,6; menggunakan 0,0 menempatkan titik asal di sana.

Bagaimana cara menggunakan ulang satu kepala panah pada kedua ujung? Rujuk marker yang sama dengan marker-start dan marker-end, dan gunakan orient="auto-start-reverse". Instans awal dibalik sementara instans akhir mengikuti arah path.

Mengapa kepala panah saya membesar ketika saya menebalkan garis? Nilai markerUnits default adalah strokeWidth. Gunakan userSpaceOnUse ketika marker harus mempertahankan ukurannya dalam koordinat pengguna elemen, lalu sesuaikan markerWidth dan markerHeight untuk sistem unit tersebut.

Apakah marker mengubah panah menjadi satu path tertutup? Tidak. Definisi marker tetap terpisah dari path yang merujuknya. Siapkan dan periksa geometri tergabung sebenarnya jika alur kerja pemotongan atau pengeditan berikutnya memerlukannya.

Sources

1. MDN — marker — Definisi marker, bentuk yang didukung, dan properti penempelan.
2. MDN — refX — Penempatan titik referensi horizontal dalam sistem koordinat marker.
3. MDN — refY — Penempatan titik referensi vertikal dalam sistem koordinat marker.
4. MDN — orient — Rotasi otomatis dan pembalikan instans awal.
5. MDN — markerUnits — Ukuran relatif terhadap stroke dan ukuran dalam koordinat pengguna.

Mulailah dengan satu motif dan periksa titik penempelan, arah, dan ukurannya pada garis dan kurva. Jika motif Anda sendiri hanya tersedia sebagai gambar raster, siapkan kandidat SVG, periksa siluet dan bukaannya, lalu kemas path yang diterima sebagai marker.