Unidades de clipPath SVG: ajusta una forma a su destino

Usa clipPathUnits="objectBoundingBox" cuando la forma de recorte deba estirarse con los límites del destino. Normaliza primero sus coordenadas. Usa userSpaceOnUse cuando necesites colocación explícita o escala uniforme que conserve las proporciones.

Cambiar solo el atributo no convierte un trazado dibujado en cientos de unidades en una forma entre cero y uno. Puede desplazar casi todo el recorte fuera del destino. Esta guía usa una silueta original de marcapáginas para mostrar el cambio de coordenadas, la distorsión resultante y un ajuste centrado que conserva cuadrada la abertura de rombo.

El recorte controla la visibilidad. No corta los trazados subyacentes para crear geometría editable nueva. Si ya tienes una silueta SVG limpia, úsala directamente; trazar solo es pertinente cuando necesitas recuperarla de una imagen rasterizada.

Elige el sistema de coordenadas antes de redimensionar

El valor predeterminado es userSpaceOnUse. Las coordenadas de recorte pertenecen al sistema de coordenadas de usuario del elemento que referencia el recorte. Con objectBoundingBox, el límite superior izquierdo del destino corresponde a (0, 0) y el inferior derecho a (1, 1). Consulta la referencia de clipPathUnits.

El cuadro delimitador del destino no es necesariamente el viewBox del SVG exterior. Recortar un grupo usa sus límites, que pueden diferir de los de un rectángulo interior. Para una primera prueba predecible, aplica el recorte directamente a un rectángulo de dimensiones conocidas.

Compara un destino ancho y otro alto

Los límites exteriores del marcapáginas son x=20, y=10, width=100, height=100. Su rombo es un segundo subtrazado dentro del mismo trazado. La prueba lo aplica a rectángulos de 200 × 120 y 120 × 200 en unidades locales SVG.

La columna central llena los límites de cada destino, pero el rombo se vuelve ancho o alto. La derecha conserva el rombo y la muesca inferior, dejando espacio en el eje más largo. Las seis aberturas siguen transparentes.

Guarda el ejemplo completo como clippath-comparison.svg y ábrelo en un navegador. Las columnas siguen el orden de la imagen. La fila superior usa rectángulos anchos y la inferior altos. Las traslaciones de visualización organizan las muestras sin cambiar sus dimensiones locales.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 470">
  <defs>
    <path id="silhouette" d="M20 10H120V110L70 85L20 110Z M70 30L85 45L70 60L55 45Z"/>
    <clipPath id="fixed" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="box" clipPathUnits="objectBoundingBox">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(.01 0 0 .01 -.2 -.1)"/>
    </clipPath>
    <clipPath id="wide-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 16 -12)"/>
    </clipPath>
    <clipPath id="tall-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 -24 28)"/>
    </clipPath>
  </defs>
  <g fill="#107c86">
    <rect x="0" y="0" width="200" height="120"
      transform="translate(20 30)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(260 30)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(500 30)" clip-path="url(#wide-fit)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(60 230)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(300 230)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(540 230)" clip-path="url(#tall-fit)"/>
  </g>
</svg>

El color verde azulado pertenece a los rectángulos. El trazado de recorte proporciona su contorno visible. La captura añade etiquetas y damero alrededor del mismo SVG; el archivo independiente tiene fondo transparente.

Normaliza los límites originales, incluido el origen

Para un punto (x, y) de un original cuyos límites son (minX, minY, width, height), calcula:

normalizedX = (x - minX) / width
normalizedY = (y - minY) / height

Aquí es (x - 20) / 100 y (y - 10) / 100. La matriz de la definición box realiza ambas operaciones sin reescribir los datos del trazado:

matrix(0.01 0 0 0.01 -0.2 -0.1)

Mapea (20, 10) a (0, 0) y (120, 110) a (1, 1). Dividir por 100 sin restar el origen dejaría la forma desplazada dentro del destino. El cuadro delimitador escala después el resultado normalizado independientemente en ancho y alto.

Usa los límites reales de la geometría que quieras normalizar. Un viewBox puede incluir espacio vacío deliberado, así que sus dimensiones no tienen por qué coincidir con las de la silueta. Si quieres conservar ese espacio, usa deliberadamente el rectángulo viewBox en vez de mezclar accidentalmente ambas medidas.

Para ilustraciones importadas con transformaciones anidadas, mide y normaliza en un sistema de coordenadas coherente. Resuelve esas transformaciones en un editor antes de copiar datos de trazado si no puedes tenerlas en cuenta con seguridad. El proceso de edición SVG explica cómo inspeccionar trazados y grupos antes de entregar.

Conserva proporciones con un único factor de escala

Para un rectángulo destino en (0, 0) local con ancho W y alto H, usa:

s  = min(W / width, H / height)
tx = (W - s * width) / 2 - s * minX
ty = (H - s * height) / 2 - s * minY
matrix(s 0 0 s tx ty)

El destino ancho da s=1.2, tx=16 y ty=-12. Su recorte ocupa x=40..160 y y=0..120. El alto da s=1.2, tx=-24 y ty=28, colocando el recorte en x=0..120 y y=40..160.

Son matrices explícitas en userSpaceOnUse, así que vuelve a calcularlas cuando cambien las dimensiones locales del destino. Mostrar todo el SVG a otro tamaño CSS escala la composición conjuntamente. Cambiar un rectángulo interior de ancho a alto es una operación distinta.

El cálculo supone ancho y alto originales no nulos y ninguna rotación o transformación de cizallamiento sin considerar. Ajusta dentro del destino: es normal dejar espacio. Estirar con unidades de cuadro delimitador es adecuado cuando llenar el destino importa más que conservar proporciones.

Conserva la abertura en la geometría de recorte

El ejemplo pone clip-rule="evenodd" en cada use dentro de su clipPath. El trazado referenciado contiene el marcapáginas exterior y el subtrazado del rombo. La regla determina qué zonas de esa forma compuesta quedan dentro del recorte.

Poner clip-rule en el rectángulo verde azulado no establece la regla de la forma de recorte. Tampoco un fill-rule usado para pintar el original sustituye a la regla de recorte. La referencia de clip-rule de MDN explica su alcance dentro de clipPath.

No añadas un rombo blanco separado esperando que reste al recorte. Las siluetas hijas de un trazado de recorte se combinan en una zona visible; sus colores no actúan como valores de máscara en blanco y negro. Para un hueco como este, usa el trazado compuesto y la regla de recorrido prevista. La guía de huecos SVG rellenos explica la estructura subyacente.

Si necesitas bordes parcialmente transparentes o visibilidad basada en luminancia, compara clipPath y una máscara SVG en la misma imagen. Un recorte sirve para un límite geométrico; una máscara ofrece otro modelo de visibilidad. Para un icono de un color pintado con CSS, consulta la guía de máscaras CSS SVG.

Comprueba los límites y el resultado exportado

Una línea horizontal o vertical puede tener un cuadro delimitador geométrico de alto o ancho cero aunque su trazo sea visible. Evita objectBoundingBox en esos destinos y no dividas por una dimensión original cero al normalizar. La especificación de coordenadas SVG excluye el ancho de trazo de este cálculo y advierte de esos casos degenerados.

Antes de entregar:

1. Confirma que el ID del recorte referenciado exista y sea único.
2. Compara destinos anchos y altos, incluida la menor abertura.
3. Comprueba límites originales y de destino en sus sistemas previstos.
4. Guarda y vuelve a abrir el SVG en la aplicación que lo utilizará.
5. Conserva la geometría original si el recorte debe seguir editable.

La especificación CSS Masking indica que recortar cambia el renderizado, no la geometría inherente. Una máquina de corte o aplicación de procesamiento geométrico puede necesitar una intersección real de trazados u otra operación del editor. Confirma los trazados resultantes en esa aplicación; una vista previa correcta en navegador no demuestra que el archivo esté listo para cortar.

Recupera una silueta rasterizada cuando sea necesario

PerfectVector encaja cuando un motivo solo existe como PNG o JPG y necesitas contornos editables para el recorte. Convierte la imagen a SVG e inspecciona borde exterior, aberturas internas y formas de fondo no deseadas antes de extraer la silueta. Elige qué contornos pertenecen al recorte; los colores originales no definen intensidades de recorte diferentes.

Conserva un maestro vectorial existente si lo tienes. Un marcapáginas geométrico sencillo puede dibujarse directamente, como en este ejemplo. Vectorizar no elige unidades de recorte, no normaliza límites ni realiza un recorte booleano permanente. Para elegir originales, lee la introducción a vectorización de imágenes.

Preguntas frecuentes

¿objectBoundingBox conserva las proporciones de la forma? No. Mapea el recorte normalizado al ancho y alto del destino independientemente. Usa escala uniforme en userSpaceOnUse si la silueta debe conservar proporciones.

¿Por qué cambiar clipPathUnits oculta mi forma? Las coordenadas pueden seguir en las unidades originales. Normalízalas al sistema relativo al destino, incluido el origen, o conserva userSpaceOnUse y colócalas explícitamente.

¿Recortar elimina las partes ocultas del SVG? No. Cambia lo renderizado y conserva la geometría subyacente. Usa una operación de edición de trazados adecuada si la entrega necesita contornos recortados permanentemente.

Fuentes

1. MDN — clipPathUnits — Opciones de coordenadas e interpretación predeterminada en espacio de usuario.
2. MDN — clip-rule — Colocación de la regla de recorrido dentro de los trazados de recorte.
3. W3C — Sistemas de coordenadas SVG — Mapeo del cuadro delimitador, exclusión del trazo y limitaciones de dimensión cero.
4. W3C — CSS Masking — Geometría de recorte, siluetas combinadas y trazados subyacentes intactos.

Si el recorte empieza con un motivo rasterizado, prepara su SVG con PerfectVector, inspecciona silueta y aberturas y prueba ambas proporciones de destino antes de elegir estiramiento o ajuste uniforme.