Clip-Path responsivo com SVG embutido

Ao aplicar um clip-path a um elemento com fundo, é comum incorporar o SVG embutido. No entanto, você pode encontrar problemas de capacidade de resposta ou alinhamento, conforme mostrado no exemplo abaixo:

O problema

Neste exemplo, o SVG embutido tem dimensões explícitas (4000px de largura), que podem ser muito maiores que o tamanho real do cabeçalho. Consequentemente, o caminho do clipe se torna desproporcionalmente grande, levando a um alinhamento inesperado.

A solução: clipPathUnits="objectBoundingBox"

Para criar um caminho do clipe responsivo, você pode usar o clipPathUnits= Atributo "objectBoundingBox":

Com esse atributo, o viewBox e as dimensões do SVG são irrelevantes e o caminho do clipe é dimensionado para a caixa delimitadora do elemento ao qual ele é aplicado. Isso garante um alinhamento responsivo e consistente do caminho do clipe, independentemente do tamanho do elemento.