Kropkowane obrysy SVG: kontroluj odstępy i zaokrąglone zakończenia

Aby uzyskać kropkowany obrys SVG, nadaj kształtowi obrys, ustaw stroke-linecap="round" i użyj kreski o zerowej długości, po której następuje dodatni odstęp, na przykład stroke-dasharray="0 20". Szerokość obrysu określa średnicę kropki. Druga liczba w tablicy kresek określa odległość wzdłuż ścieżki między środkami kropek; nie jest to pusta przestrzeń między ich widocznymi krawędziami.

To rozróżnienie ma znaczenie, gdy po zaokrągleniu zakończeń obramowanie wygląda na zbyt gęste. Zamknięta plakietka wprowadza kolejny problem: wzór może dotrzeć do punktu początkowego z krótszym pozostałym odstępem. Poniższe przykłady rozdzielają kształt zakończeń, widoczne odstępy i miejsce zamknięcia, aby ułatwić Ci dostosowanie właściwej wartości.

To ustawienia dekoracyjnego obrysu. Nie tworzą nowego odsuniętego konturu ani nie zamieniają każdej narysowanej kropki w osobną ścieżkę cięcia.

Porównaj płaskie zakończenia, zaokrąglone zakończenia i kropki

stroke-dasharray określa naprzemiennie długości rysowanych kresek i niezamalowanych odstępów. Lista dwóch liczb ułatwia sprawdzenie tego powtarzającego się wzoru. MDN dash-array reference wyjaśnia też, jak lista z nieparzystą liczbą elementów jest powtarzana, aby utworzyć sekwencję z parzystą liczbą elementów.

Skopiuj ten samodzielny kod SVG do pliku i otwórz go w przeglądarce. Każda oryginalna ścieżka ma długość 240 jednostek, a szerokość obrysu wynosi 8:

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

Pierwszy wiersz używa 12 20 z płaskimi zakończeniami. Jego pełne kreski zajmują 12 jednostek, pozostawiając 20 jednostek widocznej przestrzeni. Drugi wiersz używa tych samych liczb z zaokrąglonymi zakończeniami. Każde zakończenie sięga o 4 jednostki poza punkt końcowy kreski, więc pełna kreska zajmuje 20 jednostek, a widoczny odstęp zmniejsza się do 12.

Trzeci wiersz zmienia długość kreski na zero. Zaokrąglone zakończenia tworzą na tej prostej ścieżce kropki o średnicy 8, których środki są oddalone od siebie o 20 jednostek. Widoczny odstęp między ich krawędziami wynosi 12 jednostek. SVG painting rules organizacji W3C definiują zakończenia kresek, w tym sposób traktowania kresek o zerowej długości; cap reference w MDN wyjaśnia geometrię zakończeń.

Dla pełnych, rozdzielonych kresek na prostym odcinku, bez kalibracji odległości ani transformacji, przydatne są następujące obliczenia:

• Płaskie zakończenie: widoczna długość kreski = dash; widoczny odstęp = gap.
• Zaokrąglone zakończenie: widoczna długość kreski = dash + stroke-width; widoczny odstęp = gap - stroke-width.
• Okrągła kropka: średnica = stroke-width; odstęp między środkami = gap; widoczny odstęp = gap - stroke-width.

Jeśli wynik ostatniego obliczenia wynosi zero lub jest ujemny, kropki stykają się albo nakładają. Na zakrętach odległość wzdłuż ścieżki różni się od bezpośredniej odległości między kropkami. Sprawdź narożniki i krzywe zamiast stosować obliczenie odstępu dla linii prostej do całego obrysu.

Dopasuj powtarzający się wzór do zamkniętej plakietki

Każda z poniższych prostokątnych ścieżek plakietek ma wymiary 180 na 120 jednostek. Ich obwód wynosi 2 × (180 + 120) = 600. Ścieżka zaczyna się w lewym górnym narożniku i biegnie zgodnie z ruchem wskazówek zegara.

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

Po lewej stronie 0 32 umieszcza środki kropek w odległościach 0, 32, 64 i tak dalej aż do 576 wzdłuż ścieżki. Do powrotu ścieżki do punktu początkowego pozostają tylko 24 jednostki. Odstęp w miejscu zamknięcia jest krótszy niż pozostałe odstępy o długości 32 jednostek, więc miejsce połączenia jest nierówne. Zwiększenie rozmiaru wyświetlanego SVG uwydatnia tę rozbieżność, ale jej nie rozwiązuje.

Po prawej stronie 0 30 dzieli obwód na 20 równych odstępów. W tym konkretnym prostokącie długości obu boków również są podzielne przez 30, więc kropki wypadają w narożnikach. Wzdłuż każdego prostego boku kropki o średnicy 8 jednostek pozostawiają 22 jednostki widocznej przestrzeni. To poprawia powtarzający się wzór na wybranej plakietce; nie gwarantuje identycznych wizualnych odstępów na każdym zakrzywionym obrysie.

Dla własnego obrysu wybierz pożądaną liczbę kropek i podziel obwód ścieżki przez tę liczbę, aby uzyskać wstępną odległość między powtórzeniami. Następnie sprawdź rzeczywisty wyrenderowany wynik, zwłaszcza zakręty, drobne szczegóły i punkt zamknięcia. Kształt z wieloma niepołączonymi podścieżkami wymaga osobnej uwagi, ponieważ wzór kresek zaczyna się od nowa dla każdej podścieżki, zgodnie z opisem w specyfikacji rysowania SVG.

stroke-dashoffset przesuwa pozycję początkową wzoru wzdłuż ścieżki. Może przenieść rzucające się w oczy miejsce połączenia tam, gdzie będzie mniej widoczne, ale nie sprawi, że 600 stanie się podzielne przez 32. Jeśli zależy Ci na równomiernym zamknięciu, użyj dopasowanej odległości między powtórzeniami. MDN dash-offset reference opisuje tę regulację fazy.

Otworzyliśmy oba samodzielne pliki SVG niezależnie i sprawdziliśmy ich wygląd w przeglądarce, zestawiając go z tym porównaniem. Przykłady używają wartości bez jednostek, bez kalibracji pathLength, bez transformacji i bez zewnętrznego CSS. Pokazują te ręcznie przygotowane ścieżki, a nie konwersję PerfectVector ani test zgodności między aplikacjami.

Zachowaj spójne ustawienia rozmiaru i rysowania

Zacznij od wartości liczbowych we własnym układzie współrzędnych SVG, jak powyżej. Nie zastępuj ich wartościami procentowymi z założeniem, że oznaczają tę samą część obwodu ścieżki. dash-array reference opisuje obliczanie wartości procentowych względem obszaru widoku, a nie długości ścieżki.

Jeśli używasz pathLength do normalizacji odległości, oblicz wzór kresek w tym skalibrowanym układzie odległości. Unikaj łączenia nieskalibrowanego obwodu z tego przykładu ze znormalizowanymi wartościami kresek z innego fragmentu kodu. Poradnik animacji obrysu SVG pokazuje osobne zastosowanie natywnej kalibracji długości ścieżki do stopniowego odsłaniania rysunku.

Ustaw fill="none", gdy chcesz uzyskać samo obramowanie. Wypełnienie może pozostać widoczne nawet wtedy, gdy część obrysu jest kreskowana. Jeśli oczekiwane kropki znikają, upewnij się, że element ma widoczny obrys i że reguła CSS nie nadpisała jego atrybutów prezentacyjnych. Lista kontrolna brakującego obrysu obejmuje te sprawdzenia, które warto wykonać, zanim zaczniesz zmieniać odstępy.

Zostaw wokół geometrii wystarczająco dużo miejsca na jej obrys. Obrys o szerokości 8 jednostek wychodzi poza ścieżkę, a zaokrąglone zakończenia wychodzą poza otwarte końce. Przykład zawiera marginesy, dzięki czemu jego kropki nie są przycinane przez obszar widoku. Przetestuj gotowy plik SVG w rzeczywistym rozmiarze wyświetlania; drobne kropki, które wyglądają wyraźnie w powiększonym podglądzie, mogą być trudne do dostrzeżenia w ikonie.

Oddziel przygotowanie grafiki od projektowania obramowania

Jeśli motyw wewnątrz plakietki istnieje tylko jako PNG lub JPG, proces konwersji obrazu na grafikę wektorową w PerfectVector może przygotować dla niego edytowalną grafikę SVG. Porównaj sylwetkę, małe otwory i oddzielne obszary z oryginalnym obrazem, zanim umieścisz ją wewnątrz obramowania. Zachowaj dekoracyjny obrys jako osobny kształt, aby można było niezależnie zmieniać jego szerokość i odstępy między kropkami.

Zachowaj istniejący wektorowy plik źródłowy, jeśli jest dostępny. Prostokąt lub inne proste obramowanie zwykle łatwo narysować bezpośrednio w edytorze. Wektoryzacja nie projektuje automatycznie odsuniętego obramowania, nie odtwarza pojedynczej linii środkowej ani nie dobiera odstępów między kreskami. Jeśli zwektoryzowany gruby znak ma dwie granice, poradnik SVG z pojedynczą linią wyjaśnia, dlaczego różni się to od pojedynczej ścieżki rysowania.

W procesie przygotowania do cięcia nie zakładaj, że maszyna zinterpretuje dekoracyjny wygląd obrysu jako osobne cięcia w kształcie kropek. Przygotuj zamierzoną geometrię w edytorze i sprawdź podgląd w aplikacji docelowej. Ten artykuł testuje rysowanie w przeglądarce, a nie zachowanie plotera tnącego. Poradniki edycji na blogu omawiają powiązane decyzje dotyczące przygotowania plików.

Sprawdź końcowy obrys

Zanim zaakceptujesz plik, sprawdź osobno krótką otwartą ścieżkę i zamknięte obramowanie. Potwierdź styl zakończeń, szerokość obrysu i liczby określające powtórzenia; następnie sprawdź pierwszy i ostatni znak na otwartej ścieżce oraz połączenie na zamkniętej ścieżce. Sprawdź ciasne łuki w rozmiarze, w którym grafika będzie używana.

Ponownie otwórz zapisany plik SVG w docelowej aplikacji. Jeśli potrzebujesz edytowalnego dekoracyjnego wyglądu, zachowaj właściwości obrysu. Jeśli aplikacja docelowa wymaga trwałych konturów, wykonaj i zweryfikuj tę konwersję jako osobny etap edycji. Zachowaj edytowalną kopię źródłową, aby móc później zmienić odstępy.

FAQ

Dlaczego po wybraniu zaokrąglonych zakończeń moje kreski wydają się leżeć bliżej siebie? Zaokrąglone zakończenia wychodzą poza oba końce kreski. Na prostym odcinku widoczny odstęp między pełnymi kreskami jest równy podanemu odstępowi pomniejszonemu o szerokość obrysu, pod warunkiem że znaki pozostają rozdzielone.

Jak zrobić okrągłe kropki zamiast krótkich kapsułek? Użyj kreski o zerowej długości, dodatniego odstępu i zaokrąglonych zakończeń. Na przykład obrys o szerokości 8 ze stroke-dasharray="0 20" tworzy na prostej ścieżce kropki o średnicy 8 jednostek, których środki są oddalone od siebie o 20 jednostek.

Dlaczego jeden odstęp na zamkniętym obrysie jest inny? Odległość między powtórzeniami może nie dzielić obwodu bez reszty. Dopasuj ją do długości ścieżki, a następnie sprawdź punkt zamknięcia i narożniki. Zmiana przesunięcia kresek zmienia fazę wzoru, ale nie usuwa niedopasowania arytmetycznego.

Źródła

1. MDN — stroke-dasharray — definiuje naprzemienną listę kresek i odstępów oraz sposób obsługi jej wartości.
2. MDN — stroke-linecap — wyjaśnia geometrię płaskich i zaokrąglonych zakończeń oraz zachowanie przy zerowej długości.
3. W3C — SVG painting — określa sposób rysowania kresek, traktowania zakończeń i obsługi wzoru na podścieżkach.
4. MDN — stroke-dashoffset — definiuje przesunięcie używane do przemieszczania wzoru kresek.

Jeśli motyw Twojej plakietki ma początkowo postać obrazu rastrowego, przygotuj wstępną wersję SVG za pomocą PerfectVector, sprawdź jej kontury i otwory, a następnie dodaj kropkowane obramowanie jako osobny edytowalny kształt.