Trwale przytnij SVG bez ukrytych ścieżek

Aby trwale przyciąć wypełnioną grafikę SVG, wyznacz przecięcie każdego właściwego kształtu z obszarem kadru, a następnie wyeksportuj tylko wynikową geometrię. Edytowalny plik główny zachowaj oddzielnie. Mniejszy viewBox lub ścieżka przycinająca mogą zmienić widok, pozostawiając oryginalne ścieżki zewnętrzne w pliku.

Przykład używa czterech oryginalnych nieprzezroczystych, zamkniętych obiektów wielokątnych i prostokątnego kadru. Jeden obiekt zawiera rzeczywisty otwór. Przycinamy obiekty osobno, zachowując wypełnienia i kolejność malowania, zapisujemy SVG i ponownie otwieramy rzeczywisty plik do kontroli. To ograniczony proces geometrii, nie ogólna metoda przycinania każdego efektu SVG ani tworzenia przetestowanych plików dla ploterów.

Zdecyduj, czy grafikę ukryć, czy usunąć

Przycinanie klipem jest przydatne, gdy chcesz później zmieniać kadr. Opis przycinania MDN odróżnia wynik renderingu od geometrii elementu. Usunięcie relacji przycinania może ponownie odsłonić oryginalną grafikę.

Trwałe przycięcie zmienia dostarczaną geometrię. Użyj go, gdy następna osoba potrzebuje samych ograniczonych kształtów, zachowując nieprzycięte źródło jako oddzielny plik główny.

Usuwanie każdego niewidocznego elementu jest innym zadaniem. Kształt klipu, zasób maski lub przywoływany symbol może być konieczny, choć nie jest bezpośrednio malowany. Nasz poradnik klipów i masek wyjaśnia te relacje renderingu; poradnik współrzędnych klipu omawia ich układy współrzędnych.

Zacznij od rozpoznawalnych zamkniętych wypełnień

Potrzebujesz edytowalnego źródła, określonego kadru i sposobu sprawdzenia zapisanego SVG. Przykład uruchamia Paper.js 0.12.18 w przeglądarce. Obsługuje jednolite, całkowicie nieprzezroczyste wypełnienia wielokątów bez obrysów. Operandami są obiekty Path lub CompoundPath, a nie dowolne importowane grupy.

Źródło zawiera morską ramkę z prostokątnym otworem, pomarańczowy trójkąt, fioletowy romb i mały żółty obiekt całkowicie poza kadrem. Prostokąt kadru zaczyna się przy (60, 40) i ma 160 × 120 jednostek użytkownika SVG. To autorskie współrzędne, nie fizyczne wymiary druku.

Otwór ramki należy do ścieżki złożonej. Nie rozdzielaj jej konturów na niezwiązane wypełnione obiekty tylko po to, by iterować po nich w pętli. Poradnik otworów SVG wyjaśnia, dlaczego biała łatka i rzeczywisty przezroczysty otwór zachowują się inaczej.

Zapisz tę oryginalną próbkę jako source.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="220" viewBox="0 0 300 220">
  <path id="frame" fill="#39786E" fill-rule="evenodd"
        d="M20 20H160V180H20Z M85 70V100H115V70Z"/>
  <path id="triangle" fill="#DE9252"
        d="M150 0L270 110L150 200Z"/>
  <path id="leaf" fill="#80618E"
        d="M180 130L240 150L180 190L120 150Z"/>
  <path id="outside" fill="#D4B35E" d="M250 10H280V30H250Z"/>
</svg>

Wyznacz przecięcie każdego obiektu i zachowaj tylko wynik

Przecięcie zachowuje wspólną powierzchnię obiektu i kadru. Dokumentacja intersect() Paper.js opisuje nowy element ścieżki zawierający przecięcie. Tutaj trace: true traktuje oba operandy jako obszary. Opcja dotyczy geometrii boolowskiej; nie konwertuje rastra na wektory. Używamy insert: false, aby importowany plik główny ani pomocniczy kadr nie trafiały automatycznie do eksportowanej sceny.

Dla odtwarzalnego przykładu lokalnego zainstaluj przypiętą wersję biblioteki w pustym folderze roboczym:

npm install --save-exact paper@0.12.18

Zapisz to jako index.html, obok source.svg i poniższego pliku crop.js:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Permanent SVG crop</title>
<canvas id="work" width="300" height="220" hidden></canvas>
<p id="status">Running crop…</p>
<pre id="svg-output"></pre>
<pre id="receipt"></pre>
<script src="node_modules/paper/dist/paper-full.min.js"></script>
<script src="crop.js"></script>
</html>

Zapisz poniższy kod jako crop.js. Udostępnij folder lokalnym serwerem HTTP i otwórz index.html; skrypt pobiera sąsiedni plik SVG.

(async () => {
  paper.setup(document.getElementById('work'));
 
  const source = await (await fetch('source.svg')).text();
  const imported = paper.project.importSVG(source, {
    insert: false,
    expandShapes: true
  });
  const crop = new paper.Path.Rectangle({
    rectangle: new paper.Rectangle(60, 40, 160, 120),
    insert: false
  });
  const delivery = new paper.Group({ insert: false });
  const rows = [];
 
  for (const name of ['frame', 'triangle', 'leaf', 'outside']) {
    const operand = imported.getItem({ name });
    if (!(operand instanceof paper.Path || operand instanceof paper.CompoundPath)) {
      throw new Error('Expected filled path: ' + name);
    }
 
    const result = operand.intersect(crop, { insert: false, trace: true });
    if (Math.abs(result.area) < 1e-8) {
      rows.push({ name, removed: true });
      result.remove();
      continue;
    }
 
    result.fillColor = operand.fillColor.clone();
    result.fillRule = operand.fillRule;
    result.strokeColor = null;
    result.opacity = 1;
    result.name = 'cropped-' + name;
    delivery.addChild(result);
    rows.push({
      name,
      result: result.className,
      fill: result.fillColor.toCSS(true),
      area: result.area
    });
  }
 
  delivery.translate(new paper.Point(-60, -40));
  paper.project.activeLayer.addChild(delivery);
  const output = paper.project.exportSVG({
    asString: true,
    precision: 6,
    bounds: new paper.Rectangle(0, 0, 160, 120)
  });
 
  document.getElementById('svg-output').textContent = output;
  document.getElementById('receipt').textContent = JSON.stringify({
    paper: paper.version,
    rows,
    export_precision: 6,
    viewport: [0, 0, 160, 120]
  }, null, 2);
  document.getElementById('status').textContent = 'Intersection/export executed. Save the exact visible SVG output as cropped.svg and open that saved file independently.';
})().catch(e => {
  document.getElementById('status').textContent = 'FAIL: ' + e.message;
});

Jawna lista nazw zachowuje kolejność malowania źródła. Każdy zachowany wynik otrzymuje własne jednolite wypełnienie i jest dodawany w tej kolejności. Wcześniejsze połączenie całej grafiki w jedną sylwetkę usunęłoby oddzielne obszary koloru, które chcemy zachować. Nasz poradnik operacji boolowskich Paper.js omawia inne zadanie sumy i odejmowania.

Całkowicie zewnętrzny żółty obiekt daje puste przecięcie i jest pomijany. Próg małej powierzchni jest tylko zabezpieczeniem tej próbki, nie pozwoleniem na usuwanie drobnych detali z dowolnej grafiki.

Przesuwamy zachowaną geometrię o (-60, -40) i eksportujemy ją do obszaru 160 × 120 zaczynającego się od zera. Przesunięcie zmienia początek współrzędnych wyjścia. To operacja przecięcia usuwa niechcianą geometrię zewnętrzną; sama zmiana początku lub obszaru widoku tego nie robi. Dokumentacja eksportu projektu Paper.js opisuje jawne granice i precyzję liczbową użyte tutaj.

Zapisz, ponownie otwórz i sprawdź rzeczywisty SVG

Skopiuj dokładnie wyświetlony kod SVG do cropped.svg. Otwórz zapisany plik niezależnie, zamiast polegać wyłącznie na podglądzie programu w pamięci. W naszej próbce oddzielna strona wczytała zapisany plik, zaimportowała go do nowego zakresu Paper.js i wyświetliła przez przeglądarkowy renderer obrazów SVG.

Kontrole oddzielają strukturę pliku, geometrię i wygląd:

• Eksportowany SVG zawiera trzy wynikowe elementy ścieżek z czterema zamkniętymi konturami, ponieważ ramka zachowuje otwór.
• W tym kontrolowanym wyjściu nie ma pomocniczego kadru, oryginalnych identyfikatorów obiektów, ścieżek klipu, masek, obrazów rastrowych ani elementów efektów.
• Każdy ponownie otwarty kontur jest zamknięty i ma proste odcinki. Wszystkie wierzchołki mieszczą się w obszarze wyjścia 0…160 na 0…120, z tolerancją 0.00001 jednostki użytkownika.
• Zamierzony otwór pozostaje poza wypełnioną geometrią i przezroczysty w renderowanym pliku. Pomarańczowy obszar nadal jest nad morskim w sprawdzonym punkcie nakładania.
• Porównanie renderingu przeglądarki sprawdza podgląd tylko z klipem względem pliku przyciętego w tym samym rozmiarze, niezależnie od inspekcji geometrii.

Dla tego prostokątnego obszaru i próbki z prostymi odcinkami sprawdzenie każdego wierzchołka i krawędzi zamykających potwierdza, że zapisane kontury mieszczą się w obszarze. Krzywa z uchwytami lub wklęsły kadr wymaga innej kontroli zawierania; kilka próbek punktowych nie dowodziłoby tego samego.

Porównanie obrazu używa rastra 640 × 480 i deklarowanej tolerancji 0,5% zmienionych pikseli, gdy kanał różni się o więcej niż jeden. Rendering zapisanego pliku różnił się przy 77 z 307 200 pikseli, około 0,0251%, więc przeszedł kryterium. Nie był identyczny pikselowo: największa pojedyncza różnica kanału wynosiła 255. To tolerancja porównania wizualnego, nie geometrii. Wygładzanie przy krawędzi i rzeczywiście zachowana zewnętrzna ścieżka to różne kwestie.

Operacja usuwa geometrię poza kadrem. Nie usuwa każdego nakładania między zachowanymi kolorowymi obiektami. Te wewnętrzne nakładania pozostają w kolejności malowania; testowany punkt potwierdza zamierzony górny kolor. Spłaszczenie każdego ukrytego namalowanego nakładania byłoby oddzielnym zadaniem.

Zatrzymaj się, gdy grafika wymaga innej reprezentacji

Przykład nie potwierdza obsługi otwartych linii środkowych, obrysów, zakrzywionych operandów, gradientów, miękkich masek, rastrów, filtrów, dowolnych zagnieżdżonych stosów klipów ani półprzezroczystych nakładających się wypełnień. Nie usuwaj tych cech z założeniem, że wygląd zostaje zachowany.

Trasa z obrysem i wypełniony kontur tego obrysu są inną geometrią. Jeśli zlecenie wymaga widocznej powierzchni obrysu jako wypełnionego kształtu, przygotuj i sprawdź kopię zamienioną na kontury we właściwym edytorze przed wyborem procesu boolowskiego. Zachowaj oryginalny obrys, jeśli ważna jest edytowalność. Miękkiej maski nie można zastąpić ostrym przecięciem z zachowaniem wszystkich zanikających krawędzi.

Przy jednorazowej edycji edytor wektorowy może ułatwić wybieranie i sprawdzanie potrzebnych obiektów. Niezależnie od narzędzia sprawdź otwory, kolory i granice zapisanego wyniku. Precyzja eksportu i bardzo małe szczegóły wymagają szczególnej uwagi przed dalszym użyciem.

Odzyskuj brakującą grafikę wektorową tylko w razie potrzeby

Jeśli źródło jest istniejącym edytowalnym SVG, przytnij tę geometrię bezpośrednio. Jeśli pozostał tylko odpowiedni rastrowy clipart i potrzebujesz edytowalnych kształtów, proces clipartu PerfectVector może najpierw stworzyć kandydacki SVG. Sprawdź odzyskane kontury, otwory i oddzielne wypełnienia przed przycięciem. Wektoryzacja tworzy ścieżki z pikseli; nie rozpoznaje pożądanego kadru ani nie weryfikuje wyniku boolowskiego. Naszą oryginalną próbkę utworzono bezpośrednio, bez trasowania.

Zachowaj ilustrację rastrową, gdy potrzebna jest tekstura, a format dostawy obsługuje zamierzone przycięcie rastra. Przycięcie wektorowe jest użyteczne, ponieważ następny etap potrzebuje geometrii, a nie dlatego, że każdy obraz ma stać się SVG.

Dokończ przycięcie bez utraty pliku głównego

1. Zachowaj nieprzycięty plik główny i wskaż zamierzone zamknięte wypełnione obiekty.
2. Określ kadr w tym samym kontekście współrzędnych co obiekty.
3. Wyznacz przecięcie każdego obiektu, zachowaj sprawdzony styl i kolejność malowania oraz wyłącz elementy pomocnicze i oryginały ze sceny dostawy.
4. Wyeksportuj tylko zachowaną geometrię ze świadomie dobranymi granicami i precyzją.
5. Otwórz zapisany plik ponownie i oddzielnie sprawdź rzeczywiste ścieżki, otwory, wygląd i docelowe zastosowanie.

Ograniczone przycięcie jest zakończone, gdy zapisany plik zawiera zamierzoną geometrię w obszarze i zachowuje wymagany otwór oraz relacje kolorów. Jeśli geometria zewnętrzna pozostaje, sprawdź, czy wyeksportowano oryginalną zawartość projektu lub zmieniono tylko klip albo obszar widoku. Jeśli otwór się wypełnia, sprawdź ścieżkę złożoną i regułę wypełnienia przed łączeniem kolejnych obiektów.

Wykonaliśmy zadanie zapisanego pliku dla oryginalnej próbki wielokątnej. Nie importowaliśmy jej do plotera, nie testowaliśmy fizycznego wyjścia ani nie ustanowiliśmy ogólnej gwarancji zgodności SVG.

Częste pytania

Czy klip SVG trwale usuwa zewnętrzne ścieżki? Klip ogranicza rendering, zachowując przywołaną geometrię. Trwałe przycięcie geometrii wymaga właściwej operacji na ścieżkach i eksportu zawierającego tylko wyniki.

Czy mogę przyciąć wszystkie kolory po wcześniejszym połączeniu kształtów? Jedna suma może usunąć oddzielne obszary wypełnienia, które chcesz zachować. Przykład wyznacza przecięcie każdego jednolicie wypełnionego obiektu osobno i zachowuje kolejność malowania źródła.

Czy mniejszy viewBox usuwa ukrytą grafikę? Zmienia mapowanie obszaru widoku i wyświetlany region. Sam nie usuwa źródłowych ścieżek poza tym regionem. Sprawdź zapisaną geometrię obok podglądu.

Czy wynik zadziała w każdej aplikacji do cięcia? Ten test przeglądarkowy tego nie potwierdza. Sprawdź geometrię i operacje po imporcie do docelowej aplikacji, a następnie wykonaj odpowiednią kontrolę produkcyjną.

Źródła

1. MDN: SVG clipPath — Przycinanie wpływa na rendering bez zmiany geometrii przywołanego elementu.
2. Paper.js: PathItem — Wyniki przecięcia i obszarowe opcje boolowskie.
3. Paper.js: Project — Import SVG, zawartość projektu, granice eksportu i precyzja liczbowa.

Potrzebujesz ścieżek z clipartu dostępnego tylko jako bitmapa? Przygotuj kandydacki SVG, sprawdź otwory i wypełnienia, potem przytnij oddzielną kopię roboczą i otwórz zapisany wynik ponownie przed przekazaniem.