Markery SVG: twórz własne groty strzałek, które pozostają wyrównane

Aby dołączyć własny grot strzałki do ścieżki SVG, zdefiniuj jego grafikę wewnątrz elementu <marker> i odwołaj się do jego identyfikatora za pomocą marker-end. Ustaw refX i refY na punkt grafiki, który powinien pokrywać się z punktem końcowym ścieżki. Następnie wybierz, czy marker ma obracać się zgodnie z kierunkiem ścieżki i rosnąć wraz z grubością jej obrysu.

Te wybory rozwiązują różne problemy. Strzałka może wskazywać właściwy kierunek, a mimo to nie trafiać w punkt końcowy. Może też być prawidłowo wyrównana przy cienkim obrysie, a następnie stać się zbyt duża po zwiększeniu grubości linii. Ten przewodnik omawia osobno położenie, kierunek i rozmiar na przykładzie jednego autorskiego kształtu grotu.

Zacznij od małego, kompletnego pliku SVG

Zapisz poniższy kod jako markers.svg i otwórz go w przeglądarce. Grot w tym przykładzie został narysowany ręcznie, a jego czubek znajduje się w punkcie (11, 6) w przestrzeni współrzędnych 12 × 12. Nie jest to wynik konwersji w 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>

Pierwsza ścieżka jest prosta, a druga jest krzywą. Obie odwołują się do tego samego markera na obu końcach. Blok <defs> przechowuje definicję, a odwołania w ścieżkach sprawiają, że marker jest widoczny. Dokumentacja MDN dotycząca marker opisuje właściwości dołączania markerów na początku, w środku i na końcu ścieżki.

Użyj identyfikatora unikatowego w dokumencie zawierającym SVG. Jeśli łączysz kilka plików SVG bezpośrednio w kodzie dokumentu, dodaj prefiksy do identyfikatorów ich markerów i zaktualizuj każde odpowiadające im odwołanie url(#...). Przewodnik po sprite’ach symboli SVG wyjaśnia ten sam problem zarządzania odwołaniami w przypadku wielokrotnie używanych ikon.

Umieść wybrany punkt w punkcie końcowym ścieżki

refX="11" refY="6" określa, który punkt grafiki markera powinien pokrywać się z punktem końcowym ścieżki. Nie przesuwa samej ścieżki. W tym przykładzie tym punktem jest ostry czubek grotu.

Porównaj to z refX="0" refY="0". Przeglądarka umieszcza początek układu współrzędnych markera w punkcie końcowym ścieżki, przez co na poziomej linii czubek znajduje się dalej w prawo i niżej. Zwiększenie rozmiaru markera uwidacznia błąd, ale nie poprawia punktu zakotwiczenia.

MDN opisuje refX i refY jako współrzędne punktu odniesienia markera. Odczytuj je względem własnych współrzędnych grafiki, w tym jej viewBox, zamiast zgadywać na podstawie szerokości wyświetlanej grafiki.

Otworzyliśmy kompletny plik SVG osobno i wyrenderowaliśmy porównanie w przeglądarce. Zmiana punktu odniesienia umieściła czubek na pomarańczowym krzyżyku. Zmiana orientacji odwróciła strzałkę na początku ścieżki. Zmiana trybu jednostek decydowała o tym, czy grot rósł wraz z linią. Te obserwacje dotyczą tego przykładu; sprawdź faktycznie wyeksportowany plik w aplikacji, do której ma trafić.

Zakotwiczenie czubka dokładnie w punkcie końcowym oznacza również, że obrys sięga aż do tego punktu. Przy grubej linii część obrysu może pozostać widoczna obok wąskiego czubka, co widać na porównaniu. Jeśli wygląd tego styku ma znaczenie, dostosuj motyw, punkt zakotwiczenia lub punkt końcowy ścieżki, uwzględniając ich wzajemne położenie, i sprawdź miejsce łączenia. Umieszczenie markera nie przycina obrysu znajdującego się pod nim.

Pozwól krzywej wyznaczać kierunek

W przypadku grotu na końcu ścieżki orient="auto" dopasowuje jego orientację do kierunku ścieżki w tym punkcie. Kierunek na końcu krzywej wynika z jej lokalnej stycznej, więc strzałka nie musi wskazywać kierunku prostej łączącej oba punkty końcowe ścieżki.

W przypadku strzałek na obu końcach użyj orient="auto-start-reverse". Na końcu działa tak samo jak auto, ale marker początkowy obraca o dodatkowe 180 stopni. Dokumentacja MDN dotycząca orient opisuje to jako sposób na ponowne użycie jednego grotu wskazującego na zewnątrz na obu końcach.

Porównanie w prawym górnym panelu pokazuje tę różnicę: przy auto grot początkowy wskazuje wzdłuż krzywej. Przy auto-start-reverse wskazuje na zewnątrz od jej początku. Nie potrzebujesz drugiej, ręcznie odwróconej kopii kształtu.

Sprawdź kierunek ścieżki, jeśli wynik Cię zaskakuje. Odwrócenie ścieżki zmienia to, który koniec jest jej początkiem. Strzałka mająca wskazywać przepływ powinna być dołączona zgodnie z tym kierunkiem, nawet jeśli oba końce znajdują się na ekranie w tych samych miejscach co wcześniej.

Zdecyduj, czy grubość linii ma zmieniać rozmiar markera

markerUnits określa układ współrzędnych używany do wymiarów i zawartości markera. Wartością domyślną jest strokeWidth, a alternatywą — userSpaceOnUse. Różnicę opisuje dokumentacja MDN dotycząca markerUnits.

Grot zajmuje 10 z 12 jednostek poziomych w swoim viewBox. Przy markerWidth="6" i markerUnits="strokeWidth" jego szerokość przed obrotem wynosi 10 / 12 × 6 × stroke-width: 20 jednostek użytkownika przy obrysie o grubości 4 jednostek i 40 przy obrysie o grubości 8 jednostek. Porównanie w lewym dolnym panelu korzysta z tych ustawień.

Aby zachować szerokość grotu równą 20 jednostkom przy obu grubościach obrysu, zmień definicję na:

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

Porównanie w prawym dolnym panelu korzysta z tych wartości. Pozostawienie markerWidth="6" przy zmianie wyłącznie trybu jednostek dałoby znacznie mniejszy grot, ponieważ sześć jednostek nie byłoby już mnożone przez grubość obrysu.

userSpaceOnUse nie oznacza stałej liczby pikseli na ekranie. Skalowanie otaczającego SVG lub jego układu współrzędnych nadal może zmieniać wyświetlany rozmiar. Sprawdź marker przy docelowym rozmiarze wyświetlania całej grafiki SVG, zwłaszcza gdy duży motyw jest zmniejszany do małego oznaczenia na diagramie.

Przygotuj własny motyw, zanim zrobisz z niego marker

W przypadku trójkąta lub prostego grotu narysuj ścieżkę bezpośrednio. W przypadku istniejącej grafiki wektorowej zachowaj oryginalne ścieżki i zdecyduj, który punkt ma przylegać do linii. Zachowaj zamierzone otwory, uprość szczegóły, które znikają w docelowym rozmiarze, i zapewnij grafice wystarczająco dużo miejsca w obszarze widoku markera.

Jeśli własny grot strzałki lub motyw dekoracyjny zachował się tylko jako PNG lub JPG, proces konwersji obrazu na grafikę wektorową w PerfectVector może pomóc odtworzyć wersję SVG do oceny przed tym etapem przygotowania markera. Porównaj sylwetkę i małe otwory ze źródłem, usuń wszelkie niepożądane kształty tła, a następnie wybierz granice zatwierdzonej grafiki i jej punkt zakotwiczenia. Konwersja nie tworzy definicji markerów, nie przypisuje kierunku ścieżki ani nie dodaje funkcjonalności łączników diagramu.

Podczas testowania jawnie określaj kolory. Ten przykład używa turkusowego markera i granatowej linii, aby granica między nimi pozostała widoczna. Jeśli Twoja strzałka ma mieć wszędzie jeden kolor, świadomie ustaw oba kolory i sprawdź wynik w pliku docelowym. Przewodnik po zmianie kolorów SVG omawia stałe wypełnienia i style, które mogą utrudniać zmianę kolorów.

Sprawdź plik tam, gdzie będzie używany

Zachowaj edytowalny plik źródłowy, a następnie przetestuj kopię przeznaczoną do przekazania w rzeczywistej witrynie, edytorze lub procesie eksportu. Prawidłowy podgląd w przeglądarce potwierdza wygląd tego pliku w przeglądarce; nie potwierdza sposobu jego importowania w każdej aplikacji.

• Upewnij się, że po przygotowaniu lub optymalizacji pliku każde url(#...) wskazuje właściwy identyfikator markera.
• Sprawdź ścieżki proste i krzywe, w tym marker początkowy, jeśli go używasz.
• Porównaj najmniejszą i największą grubość linii w projekcie.
• Sprawdź czubek, miejsce łączenia i wszelkie przycięte fragmenty grafiki w docelowym rozmiarze wyświetlania.
• Otwórz przekazany plik SVG ponownie, niezależnie od pliku źródłowego, i porównaj go z podglądem źródła.

Markery to widoczne dekoracje dołączane do określonych miejsc na ścieżce. Nie tworzą semantycznych połączeń między obiektami diagramu. Aby korzystać z punktów połączeń i zachowania szablonów właściwych dla edytora diagramów, użyj jego natywnego systemu kształtów; przewodnik po własnych kształtach w draw.io omawia to odrębne zadanie.

Marker nie staje się też automatycznie fizycznie połączonym konturem do cięcia. Jeśli docelowy proces wymaga zamkniętej geometrii do cięcia, przygotuj i sprawdź w edytorze grafiki wektorowej osobną kopię do przekazania, opartą na ścieżkach. Linia i grot nakładające się na ekranie nie dowodzą, że tworzą jeden połączony kontur. Więcej przewodników po przygotowaniu SVG omawia porządkowanie grafiki i sprawdzanie jej na dalszych etapach pracy.

FAQ

Dlaczego mój grot strzałki SVG jest przesunięty względem linii? Sprawdź refX i refY względem współrzędnych grafiki markera. Wskazują one punkt umieszczany w punkcie końcowym ścieżki. W tym przykładzie czubek znajduje się w punkcie (11, 6); użycie współrzędnych (0, 0) umieszcza tam zamiast niego początek układu współrzędnych.

Jak użyć tego samego grotu na obu końcach? Odwołaj się do tego samego markera za pomocą marker-start i marker-end oraz użyj orient="auto-start-reverse". Instancja początkowa zostaje odwrócona, a instancja końcowa podąża za kierunkiem ścieżki.

Dlaczego grot rośnie, gdy zwiększam grubość linii? Domyślną wartością markerUnits jest strokeWidth. Użyj userSpaceOnUse, gdy marker ma zachowywać swój rozmiar we współrzędnych użytkownika elementu, a następnie dostosuj markerWidth i markerHeight do tego układu jednostek.

Czy marker zmienia strzałkę w jedną zamkniętą ścieżkę? Nie. Definicja markera pozostaje oddzielona od ścieżki, która się do niej odwołuje. Przygotuj i sprawdź rzeczywiście połączoną geometrię, jeśli wymaga jej dalszy proces cięcia lub edycji.

Źródła

1. MDN — marker — definicje markerów, obsługiwane kształty i właściwości dołączania.
2. MDN — refX — poziome położenie punktu odniesienia w układzie współrzędnych markera.
3. MDN — refY — pionowe położenie punktu odniesienia w układzie współrzędnych markera.
4. MDN — orient — automatyczny obrót i odwrócenie instancji początkowej.
5. MDN — markerUnits — rozmiar zależny od grubości obrysu i rozmiar we współrzędnych użytkownika.

Zacznij od jednego motywu i sprawdź jego punkt zakotwiczenia, kierunek i rozmiar zarówno na linii prostej, jak i na krzywej. Jeśli Twój motyw istnieje tylko jako obraz rastrowy, przygotuj wersję SVG do oceny, sprawdź jej sylwetkę i otwory, a następnie umieść zaakceptowane ścieżki w definicji markera.