Running crop…
``` Salve isto como `crop.js`. Sirva a pasta com um servidor HTTP local e abra `index.html`; o script busca o arquivo SVG na mesma pasta. ```js (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; }); ``` A lista explícita de nomes segue a ordem de pintura dessa origem. Cada resultado preservado recebe seu próprio preenchimento sólido e é adicionado nessa ordem. Unir toda a arte em uma única silhueta antes disso descartaria as regiões de cores separadas que queremos manter. Nosso [guia de operações booleanas do Paper.js](https://perfectvector.com/pt-BR/blog/paperjs-svg-booleans) aborda a tarefa diferente de união e subtração. O objeto amarelo totalmente externo produz uma interseção vazia e é omitido. O pequeno limite de área é apenas uma proteção para este exemplo, não uma autorização para apagar detalhes finos de qualquer arte. Transladamos a geometria preservada em `(-60, -40)` e a exportamos para uma área de visualização de `160 × 120` começando em zero. Essa translação muda a origem das coordenadas da saída. A operação de interseção é que remove a geometria externa indesejada; mudar apenas a origem ou a área de visualização não faria isso. A [referência de exportação de projetos do Paper.js](https://paperjs.org/reference/project/) documenta os limites explícitos e a precisão numérica usados aqui. ## Salve, reabra e inspecione o SVG real Copie exatamente a marcação SVG exibida para `cropped.svg`. Abra esse arquivo salvo de forma independente, sem depender apenas da prévia em memória do programa. No nosso exemplo, uma página separada carregou o arquivo salvo, importou-o em um novo escopo do Paper.js e o exibiu pelo renderizador de imagens SVG do navegador.  *Arte poligonal original criada diretamente e conferências reais do arquivo salvo. O clip mantém os objetos originais; a exportação por interseção contém apenas a geometria preservada. Isso não demonstra compatibilidade com qualquer SVG ou máquina de corte.* As verificações separam estrutura do arquivo, geometria e aparência: * O SVG exportado contém três elementos de caminho resultantes, com quatro contornos fechados porque a moldura preserva sua abertura. * O auxiliar de recorte, os IDs dos objetos originais, caminhos de recorte, máscaras, imagens raster e elementos de efeitos não aparecem nesta saída controlada. * Todo contorno reaberto está fechado e tem segmentos retos. Todos os vértices ficam na região de saída de `0…160` por `0…120`, com tolerância de `0.00001` unidade de usuário. * A abertura desejada permanece fora da geometria preenchida e transparente no arquivo renderizado. A região laranja ainda aparece acima da verde-azulada no ponto de sobreposição conferido. * Uma comparação renderizada no navegador verifica a prévia apenas com clip contra o arquivo recortado no mesmo tamanho, separadamente da inspeção geométrica. Para essa região retangular e esse exemplo de segmentos retos, conferir todos os vértices e as arestas de fechamento comprova que os contornos armazenados permanecem dentro da região. Uma curva com alças de controle ou um recorte côncavo exige outra verificação de contenção; alguns pontos de amostra não provariam o mesmo resultado. Nossa comparação de imagens usa um raster de `640 × 480` e um limite declarado de 0.5% de pixels alterados quando um canal difere em mais de um. A renderização do arquivo salvo diferiu em 77 de 307200 pixels, cerca de 0.0251%, então passou nesse critério. Ela não foi idêntica pixel a pixel: a maior diferença em um canal individual foi 255. Essa é uma tolerância de comparação visual, diferente da tolerância geométrica. Antisserrilhamento perto de uma borda e um caminho externo realmente preservado são problemas distintos. Essa operação remove a geometria fora do recorte. Ela não remove toda sobreposição entre os objetos coloridos preservados. Essas sobreposições internas permanecem na ordem de pintura; o ponto testado confirma a cor superior desejada. Achatar todas as sobreposições pintadas e ocultas seria outra tarefa. ## Pare quando a arte precisar de outra representação Este exemplo não comprova suporte a linhas centrais abertas, traços, operandos curvos, gradientes, máscaras suaves, imagens raster, filtros, pilhas arbitrárias de clips aninhados ou pinturas translúcidas sobrepostas. Não remova esses recursos supondo que a aparência será preservada. Uma rota com traço e o contorno preenchido desse traço têm geometrias diferentes. Se o trabalho precisar da área visível do traço como forma preenchida, prepare e confira uma cópia com o traço convertido em contorno em um editor adequado antes de escolher um fluxo booleano. Mantenha o traço original se a editabilidade for importante. Uma máscara suave não pode ser substituída por uma interseção de borda rígida preservando todas as suas bordas esmaecidas. Para uma edição pontual, um editor vetorial pode ser a opção mais fácil para selecionar e inspecionar os objetos necessários. Seja qual for a ferramenta, confira furos, cores e limites do resultado salvo. A precisão de exportação e os detalhes muito pequenos merecem atenção especial antes do uso na próxima etapa. ## Recupere a arte vetorial ausente apenas quando necessário Se a origem já for um SVG editável, recorte essa geometria diretamente. Se só restar uma imagem clipart raster adequada e você precisar de formas editáveis, o [fluxo de clipart do PerfectVector](https://perfectvector.com/pt-BR/clipart-to-svg) pode primeiro criar um candidato em SVG. Inspecione os contornos recuperados, as aberturas e os preenchimentos separados antes de recortar. A vetorização cria caminhos a partir de pixels; ela não identifica o limite de recorte desejado nem valida o resultado booleano. Nosso exemplo original foi criado diretamente e não foi traçado. Preserve uma ilustração raster quando a textura for necessária e o formato de entrega aceitar o recorte raster previsto. Um recorte vetorial é útil porque a próxima etapa precisa de geometria, não porque toda imagem tenha de virar SVG. ## Conclua o recorte sem perder o mestre 1. Preserve o mestre sem recorte e identifique os objetos fechados e preenchidos desejados. 2. Defina o recorte no mesmo contexto de coordenadas desses objetos. 3. Intersecte cada objeto, preserve seu estilo e sua ordem de pintura testados e exclua auxiliares e originais da cena de entrega. 4. Exporte apenas a geometria preservada com limites e precisão escolhidos deliberadamente. 5. Reabra o arquivo salvo e confira separadamente seus caminhos reais, aberturas, aparência e destino pretendido. O recorte delimitado termina quando o arquivo salvo contém a geometria desejada dentro da região e preserva as relações necessárias de furos e cores. Se ainda houver geometria externa, confira se você exportou o conteúdo original do projeto ou apenas mudou um clip ou a área de visualização. Se uma abertura ficar preenchida, verifique o caminho composto e a regra de preenchimento antes de combinar mais objetos. Concluímos a tarefa do arquivo salvo para o exemplo poligonal original. Não o importamos em uma máquina de corte, não testamos resultados físicos nem estabelecemos uma garantia geral de compatibilidade SVG. ## Perguntas frequentes **Aplicar um clip a um SVG apaga permanentemente seus caminhos externos?** O clip restringe a renderização mantendo a geometria referenciada. Um recorte geométrico permanente precisa de uma operação de caminhos adequada e de uma exportação contendo apenas os resultados. **Posso recortar todas as cores unindo as formas primeiro?** Uma única união pode descartar as regiões separadas de preenchimento que você pretendia preservar. Este exemplo intersecta cada objeto de preenchimento sólido separadamente e mantém a ordem de pintura da origem. **Um viewBox menor remove a arte oculta?** Ele muda o mapeamento da área de visualização e a região exibida. Por si só, não apaga caminhos de origem fora dessa região. Inspecione a geometria salva além da prévia. **O resultado funcionará em todos os aplicativos de corte?** Este teste no navegador não comprova isso. Inspecione a geometria e as operações importadas no destino pretendido e depois faça a verificação de produção adequada. ## Fontes 1. [MDN: SVG clipPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/clipPath) — O clip afeta a renderização sem mudar a geometria do elemento referenciado. 2. [Paper.js: PathItem](https://paperjs.org/reference/pathitem/) — Resultados de interseção e opções booleanas baseadas em áreas. 3. [Paper.js: Project](https://paperjs.org/reference/project/) — Importação SVG, conteúdo de projetos, limites de exportação e precisão numérica. *** Precisa de caminhos de uma origem clipart disponível apenas como bitmap? [Prepare um candidato em SVG](https://perfectvector.com/pt-BR/clipart-to-svg), inspecione seus furos e preenchimentos, recorte uma cópia de trabalho separada e reabra o resultado salvo antes da entrega. ## Explore - [Read the HTML article](https://perfectvector.com/pt-BR/blog/permanent-crop-svg) - [SVG feComposite: compare arte com in, out e xor](https://perfectvector.com/pt-BR/blog/svg-composite-artwork.md) - [z-index SVG não funciona? Corrija a ordem dos traçados](https://perfectvector.com/pt-BR/blog/svg-z-index-order.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)