Jest to trochę ezoteryczna rzecz, po prostu musiałem to zrobić sam raz i uznałem to za zagmatwane, więc pomyślałem, że zrobię o tym cały film.
Rzecz w tym, że nie wszystko jest w formacie SVG. jest fantastyczny, ponieważ może to być wszystko. Ale jego składnia jest nieco bardziej złożona niż w przypadku innych kształtów. Więc (może z tego powodu?) Illustrator zawsze wyświetla kształty w SVG z najbardziej odpowiednim elementem. Prostokąty to , inne kształty złożone tylko z prostych linii to a , lub jeśli jest to kształt otwarty a , itp.
To byłoby w porządku, gdyby nie różne metody DOM dla tych kształtów. Element ścieżki ma wywoływaną metodę, getTotalLength()która pozwala wiedzieć, jak długa jest ścieżka. To całkiem fajne i czasami przydatne, ale nie możesz tego zrobić tylko na , żadnym innym elemencie.
Jednym z powodów, dla których warto wiedzieć, że długość jest taka, jest to, że zamierzasz ją animować tak, aby kształt „sam się rysował” - fajny mały efekt projektowy (zbiór przykładów). Możesz to zrobić w CSS, ale miło jest użyć JavaScript, aby zastosować ten CSS, aby za każdym razem animował idealny dystans.
Powiedzmy, że chcesz zrobić ten efekt rysowania, ale kształt jest taki, więc JavaScript zawodzi. Możesz przekształcić ten wielokąt w ścieżkę, nie zmieniając go wizualnie, po prostu dodając do niego punkt z uchwytem Beziera. Podobnie jak w, kliknij narzędziem Pióro i przeciągnij, aby uchwyty wysunęły się i wyrównaj je wzdłuż linii, która już tam jest. Istnienie tego punktu spowoduje, że będzie to wynik.
Jeśli często to robisz, istnieje narzędzie o nazwie Poly2Path, które działa i nie wymaga tego zbędnego punktu.