Адаптивный Clip-Path со встроенным SVG

При применении clip-path к элементу с фоном обычно встраивают SVG в строку. Однако вы можете столкнуться с проблемами с отзывчивостью или выравниванием, как показано в примере ниже:

Проблема

В этом примере встроенный SVG имеет явные размеры (ширина 4000 пикселей), которые могут быть намного больше фактического размера заголовка. Следовательно, путь клипа становится непропорционально большим, что приводит к неожиданному выравниванию.

Решение: clipPathUnits="objectBoundingBox"

Чтобы создать адаптивный путь клипа, вы можете использовать clipPathUnits= Атрибут "objectBoundingBox":

При использовании этого атрибута viewBox и размеры SVG не имеют значения, а путь обрезки вместо этого масштабируется до ограничивающей рамки элемента, к которому он применяется. Это обеспечивает быстрое и последовательное выравнивание пути обрезки независимо от размера элемента.