Ruta de clip responsiva con SVG en línea

Al aplicar una ruta de clip a un elemento con fondo, es común incrustar el SVG en línea. Sin embargo, puede encontrar problemas con la capacidad de respuesta o la alineación, como se ve en el siguiente ejemplo:

El problema

En este ejemplo, el SVG en línea tiene dimensiones explícitas (4000 px de ancho), que pueden ser mucho más grandes que el tamaño real del encabezado. En consecuencia, la ruta del clip se vuelve desproporcionadamente grande, lo que lleva a una alineación inesperada.

La solución: clipPathUnits="objectBoundingBox"

Para crear una ruta del clip responsiva, puede usar clipPathUnits= Atributo "objectBoundingBox":

Con este atributo, el viewBox y las dimensiones del SVG son irrelevantes y, en cambio, la ruta del clip se escala al cuadro delimitador del elemento al que se aplica. Esto garantiza una alineación receptiva y consistente de la ruta del clip, independientemente del tamaño del elemento.