Cień SVG jest przycięty? Sprawdź filtr i obszar widoku

Przycięty cień SVG może napotkać dwie różne granice. Obszar filtra ogranicza miejsce, w którym obliczany jest efekt; obszar widoku SVG lub kontener nadrzędny może następnie przyciąć wyrenderowany wynik. Najpierw powiększ obszar filtra. Jeśli cień nadal kończy się na krawędzi obrazu, sprawdź obszar widoku i jego reguły przycinania.

Nie musisz ponownie wektoryzować pliku SVG, którego ścieżki są już nienaruszone. Ten poradnik zmienia obszar działania efektu i widoczne płótno, zachowując ten sam oryginalny kształt.

Dwie granice, jedna niezmieniona ścieżka

Stworzyliśmy ręcznie niewielki kształt i otworzyliśmy trzy wersje w przeglądarce. Każda używa tej samej ścieżki i ustawień feDropShadow: dx="22", dy="18" oraz stdDeviation="12". Poniższy zrzut pokazuje rzeczywiste renderowanie w przeglądarce, a nie konwersję w PerfectVector.

W pierwszej wersji obszar filtra rozciąga się od (50, 50) do (210, 180). Powoduje to ostre przycięcie wzdłuż prawej i dolnej krawędzi cienia. W drugiej wersji obszar powiększa się i obejmuje zakres od (-20, -20) do (300, 280), ale SVG nadal pokazuje tylko 0 0 240 220. Prawa krawędź cienia dociera teraz do ramki obszaru widoku i zostaje tam przycięta.

Trzecia wersja zachowuje większy obszar filtra i zmienia viewBox na -20 -20 320 300. Jej width i height również zmieniają się na 320 i 300, dzięki czemu we wszystkich trzech przykładach jedna jednostka SVG nadal odpowiada jednemu pikselowi CSS. Dodatkowa przestrzeń mieści widoczny cień bez zmiany rozmiaru ścieżki.

Powiększ obszar filtra we właściwym układzie współrzędnych

Atrybuty x, y, width i height elementu <filter> definiują jego obszar. Ich wartości domyślne to -10%, -10%, 120% i 120%: pewien margines już istnieje, ale może być niewystarczający przy konkretnym przesunięciu i rozmyciu. MDN dokumentuje te wartości domyślne.

Sprawdź filterUnits, zanim zmienisz liczby:

• objectBoundingBox, czyli wartość domyślna, interpretuje obszar względem prostokąta ograniczającego element, do którego zastosowano filtr. Margines procentowy zależy od wymiarów kształtu.
• userSpaceOnUse pozwala zdefiniować obszar w bieżącym układzie współrzędnych użytkownika elementu odwołującego się do filtra. Przydaje się, gdy znasz współrzędne grafiki.

Te reguły dotyczą obszaru, co opisuje dokumentacja filterUnits. Nie zmieniają automatycznie jednostek przesunięcia ani rozmycia cienia.

primitiveUnits określa jednostki wartości długości wewnątrz składowych filtra. Domyślnie ma wartość userSpaceOnUse; w przykładzie ustawiamy ją jawnie, aby 22, 18 i 12 zachowały to znaczenie. Zmiana na objectBoundingBox zmieniłaby sposób interpretacji tych wartości. MDN rozróżnia jednostki składowych filtra i jednostki obszaru filtra.

W swoim pliku sprawdź granice obiektu lub grupy, do których zastosowano filtr, a następnie dodaj wystarczająco dużo miejsca w kierunkach, w których rozciąga się cień. Poniższe liczby pasują do tego przykładu. Nie są uniwersalnym marginesem dla cienia. Jeśli zwiększysz rozmycie, przesuniesz cień lub przekształcisz grupę z filtrem, sprawdź wynik ponownie.

Zapewnij miejsce także w obszarze widoku SVG

Zapisz ten kompletny przykład jako shadow.svg i otwórz go w przeglądarce. To dokładnie ten sam SVG, którego użyliśmy w trzecim wariancie, sprawdzony także jako samodzielny plik:

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="300" viewBox="-20 -20 320 300" overflow="hidden">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse"
      primitiveUnits="userSpaceOnUse" x="-20" y="-20" width="320" height="300">
      <feDropShadow dx="22" dy="18" stdDeviation="12"
        flood-color="#152b34" flood-opacity="0.7"/>
    </filter>
  </defs>
  <path d="M 60 160 L 60 100 Q 60 60 100 60 L 200 60 L 200 120 Q 200 170 150 170 L 70 170 Q 60 170 60 160 Z" fill="#078875" filter="url(#shadow)"/>
</svg>

viewBox ma cztery wartości: minimalną współrzędną x, minimalną współrzędną y, szerokość i wysokość. Odwzorowuje ten prostokąt współrzędnych użytkownika na obszar widoku SVG. Zwiększenie jego wymiarów przy zachowaniu tej samej szerokości i wysokości wyświetlania sprawia, że grafika wygląda na mniejszą; nie dodaje miejsca w układzie strony poza elementem. MDN wyjaśnia odwzorowanie viewBox.

Aby odtworzyć oba problemy, zmień tylko te wartości w kopii przykładu:

1. Aby uzyskać środkowy wariant, pozostaw filtr bez zmian, ale w głównym elemencie ustaw width="240", height="220" i viewBox="0 0 240 220".
2. Aby uzyskać pierwszy wariant, zachowaj ten mniejszy obszar widoku i dodatkowo ustaw w filtrze x="50", y="50", width="160" i height="130".
3. Przywróć pełny przykład i porównaj prawą oraz dolną krawędź. Dane ścieżki nigdy się nie zmieniają.

Jeśli cały rysunek znajduje się poza płótnem, skorzystaj z szerszego zestawu wskazówek dotyczących sprawdzania pustego SVG. Jeśli rysunek jest widoczny, ale jego wymiary zmieniają się podczas importu, sprawdź zależność między jednostkami SVG a rozmiarem, zanim dostosujesz geometrię.

Dlaczego overflow może pomóc w SVG osadzonym bezpośrednio w HTML, ale nie rozwiązać problemu z plikiem

W przykładzie jawnie ustawiono overflow="hidden", aby można było odtworzyć granicę obszaru widoku. W przypadku SVG osadzonego bezpośrednio w HTML overflow="visible" może usunąć przycinanie przez ten obszar widoku. Nie odzyska jednak pikseli już odrzuconych na granicy obszaru filtra, a element nadrzędny z własnym przycinaniem nadal może ukrywać wynik. CSS może również nadpisać atrybut prezentacyjny SVG. Dokumentacja overflow w SVG opisuje te reguły przycinania.

Sprawdź faktyczny sposób osadzenia. SVG osadzone bezpośrednio w HTML na stronie z dużą ilością miejsca, samodzielny plik SVG oraz SVG załadowane przez element obrazu HTML różnią się pod względem dostępnej przestrzeni i otaczającego je układu. Nasz zrzut trzech wariantów wykorzystuje elementy obrazu, a poprawiony plik ma wystarczająco dużo miejsca na wewnętrznym płótnie. Zastosuj to podejście, gdy SVG ma być używane jako samodzielny obraz: zmieść efekt w zamierzonych granicach, a następnie ponownie otwórz dokładnie ten plik w miejscu docelowym.

Jeśli plik wygląda poprawnie samodzielnie, ale jest przycinany wewnątrz karty, sprawdź ustawienia overflow, przycinania i maskowania karty. Jeśli problem występuje tylko w określonym edytorze lub narzędziu eksportującym, porównaj uproszczoną kopię i sprawdź obsługę filtrów w tej aplikacji. Poradnik dotyczący zmian wyglądu SVG omawia ten odrębny problem z importerem.

Zachowaj geometrię i odtwórz efekt osobno

Wyrenderowany cień dodaje efekt wizualny do ścieżki; nie przekształca rozmycia w kolejny edytowalny kontur. Zachowaj źródłowy plik SVG z oryginalną geometrią. Przy przygotowywaniu do cięcia sprawdź kontury ścieżek osobno: widoczny cień nie jest dodatkową linią cięcia.

Jeśli źródło istnieje tylko jako PNG lub JPG, PerfectVector może pomóc odzyskać geometrię SVG, zanim dodasz efekt. Przekształć grafikę bez cienia w grafikę wektorową, a następnie sprawdź w edytorze kontur, przerwy i niepożądane kształty tła. Dodaj tam cień i sprawdź jego granice zgodnie z opisanymi wyżej wskazówkami.

Użyj źródła bez utrwalonego rozmycia, jeśli jest dostępne. Wektoryzacja spłaszczonego obrazu nie może przywrócić oryginalnych ustawień filtra ani dowieść, gdzie zgodnie z zamysłem projektanta miał przebiegać obrys kształtu bez rozmycia. W przypadku prostego znaku bez czystego źródła ręczne przerysowanie może zapewnić większą kontrolę. Omówienie wektoryzacji obrazów wyjaśnia, co odtwarza wektoryzacja.

Sprawdź plik końcowy

Otwórz sam wyeksportowany plik SVG, a nie tylko płótno edytora. Potwierdź, że zamierzony cień mieści się przy docelowym rozmiarze wyświetlania i że plik wynikowy nadal zawiera potrzebne ścieżki. Sprawdź również rzeczywistą stronę internetową lub aplikację docelową, ponieważ przycinanie przez otaczający element lub nieobsługiwany filtr mogą ponownie wywołać ten objaw.

Unikaj pozostawiania ogromnego obszaru filtra jako domyślnego sposobu naprawy. Obszar znacznie większy, niż wymaga efekt, utrudnia zrozumienie działania pliku; nie usunie też przycinania na zewnętrznej granicy. Dobierz margines świadomie, zachowaj źródło bez filtra i sprawdzaj ponownie po zmianie rozmycia lub przesunięcia.

Często zadawane pytania

Dlaczego cień nadal jest przycięty po zwiększeniu szerokości filtra? Obszar widoku SVG, kontener nadrzędny, ścieżka przycinania lub maska mogą narzucać kolejną granicę. Sprawdź x i y filtra, a także jego szerokość i wysokość, a następnie sprawdź, z czym pokrywa się pozostała krawędź przycięcia.

Czy filterUnits zmienia promień rozmycia? filterUnits określa układ współrzędnych obszaru filtra. primitiveUnits określa jednostki wartości długości wewnątrz składowych filtra, w tym ustawień przesunięcia i rozmycia cienia. Rozpatruj je osobno podczas diagnozowania pliku.

Czy mogę naprawić przycinanie przez ponowną wektoryzację SVG? Jeśli SVG ma już użyteczne ścieżki, napraw obszar filtra lub obszar widoku. Wektoryzacja należy do wcześniejszego etapu, gdy źródłem jest obraz rastrowy; nie odzyskuje oryginalnych parametrów cienia.

Źródła

1. MDN: filter element — Definiuje element filtra i domyślny margines jego obszaru.
2. MDN: filterUnits — Wyjaśnia współrzędne obszaru filtra względem prostokąta ograniczającego i w przestrzeni użytkownika.
3. MDN: primitiveUnits — Rozróżnia długości wewnątrz składowych filtra i zewnętrzny obszar filtra.
4. MDN: viewBox — Opisuje odwzorowanie współrzędnych użytkownika na widoczny obszar widoku SVG.
5. MDN: overflow — Dokumentuje przycinanie przez obszar widoku, wartości domyślne SVG osadzonego bezpośrednio w HTML oraz pierwszeństwo CSS.

Zaczynasz od kształtu dostępnego tylko jako obraz rastrowy? Przygotuj ścieżki SVG w PerfectVector, najpierw sprawdź odzyskany kontur, a następnie dodaj cień i ponownie otwórz końcowy plik SVG, aby sprawdzić obie granice.