Transformar patrones SVG: gira el relleno, no el contorno

Para girar un patrón SVG dentro de una forma fija, coloca patternTransform="rotate(...)" en el elemento pattern. Mantén sin cambios la transformación de la propia forma. Para desplazar dónde aparece el diseño repetido, usa una traslación en ese mismo patrón.

Estas ediciones mueven el sistema de coordenadas de la pintura. Girar un grupo que contiene la forma también mueve su geometría mostrada. Nuestro emblema hueco original hace visible la diferencia: el contorno permanece vertical cuando gira la pintura, mientras que un control separado del objeto completo inclina el emblema y su abertura.

Elige el elemento que debe moverse

La referencia actual de patternTransform describe una lista de transformaciones aplicada a la celda del patrón. La definición de patrones de SVG2 explica los sistemas de coordenadas de la celda y la transformación de su pintura.

En este ejemplo, el motivo es una pequeña marca angular asimétrica repetida dentro de una celda de 24 unidades. La forma que recibe la pintura es otro trazado: una insignia asimétrica con una abertura rectangular. Separar esas funciones aclara la decisión de edición.

Usamos el atributo SVG directamente. La nota de MDN sobre la implementación de transformaciones CSS no promete que una propiedad CSS llamada pattern-transform funcione en tu destino.

Gira la pintura dentro del contorno

Abre una plantilla completa de rotación de pintura

Guarda este SVG como pattern-emblem.svg y ábrelo en un navegador. Es autónomo, sin imagen externa ni biblioteca. La rotación del patrón es de 30 grados alrededor del punto de origen (100,80); el grupo receptor no tiene transformación.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
      <rect width="24" height="24" fill="#f4f0e4"/>
      <path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
    </pattern>
  </defs>
  <g>
    <path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
  </g>
</svg>

La regla de relleno evenodd deja abierto el rectángulo interior. Consulta la referencia de fill-rule para la regla basada en cruces. La abertura pertenece al trazado del emblema, por lo que girar la pintura repetida no la gira.

Tanto patternUnits como patternContentUnits son explícitos en este origen. La referencia de patternUnits define el sistema de coordenadas de la celda. Nuestra guía de unidades de patrón cubre en detalle las dimensiones de celdas y las coordenadas del motivo. Aquí las mantenemos fijas para aislar la transformación; no es una receta para diseñar una repetición sin juntas.

Compara rotación, traslación y un control geométrico

Haz tres copias de la plantilla y cambia solo el atributo indicado:

1. Para la pintura original, elimina patternTransform del patrón.
2. Para la pintura desplazada, sustitúyelo por patternTransform="translate(7 5)".
3. Para el control del objeto completo, elimina la transformación del patrón y añade transform="rotate(20 100 80)" al elemento receptor g.

La copia trasladada conserva la orientación del motivo, pero cambia dónde cae dentro de la insignia. Una marca en el límite puede entrar o salir de la forma pintada. La copia girada rota el motivo y su retícula de repetición juntos; no se limita a girar cada motivo alrededor de su propio centro.

Para el control del objeto, la referencia del atributo transform documenta la rotación alrededor de un punto elegido. Esa transformación cambia cómo se muestra la geometría del grupo. Su pintura de patrón normal viaja con él; las unidades de patrón de espacio de usuario no hacen que la pintura de este ejemplo permanezca inmóvil globalmente.

Empieza con una sola transformación al diagnosticar el resultado. Si después combinas rotación, traslación y escala, revisa su orden en la guía del orden de transformaciones SVG. Combinar transformaciones introduce otra cuestión de coordenadas que esta comparación controlada evita.

Verifica la geometría y los píxeles por separado

Renderizamos las cuatro variantes originales en Chrome a 200×160 y 400×320 píxeles CSS. La relación de píxeles del dispositivo del navegador era 2. Cada origen también se decodificó y dibujó en un canvas cuyas dimensiones internas coincidían con el tamaño de prueba indicado, para leer sus píxeles de forma independiente de la captura.

Todos los archivos contienen la misma cadena d del emblema y el mismo trazado del motivo: dos elementos path y ningún elemento image. Sus hashes de archivo completo difieren porque sus transformaciones difieren. El recuadro geométrico local del emblema es (30,25,140,110) en todos los casos.

Ese recuadro local por sí solo no detectaría el cambio del objeto completo. Para este emblema poligonal, también transformamos sus cinco vértices exteriores con la matriz real del navegador y medimos su extensión mostrada. La tabla normaliza el viewport grande de nuevo a unidades de origen:

Las extensiones normalizadas coincidieron en ambos tamaños probados. El control del objeto conserva la misma cadena d, pero su geometría mostrada cambia. Por tanto, la igualdad de los datos de origen sirve como prueba de que se mantiene la construcción del trazado, pero no basta para demostrar que el contorno visible no se movió.

En las variantes que solo cambian la pintura, los búferes completos de píxeles del canvas diferían del original en cada tamaño. En el punto de origen (45,45), la muestra original era el fondo de la celda (244,240,228) y la de pintura girada era el motivo terracota (193,90,56), ambas con alfa 255. La traslación no cambió esa muestra concreta, aunque su búfer completo era distinto. Un único punto de muestra puede no detectar un desplazamiento de pintura.

En el origen (85,80), la abertura tenía alfa cero en los ocho casos. Los límites de píxeles completamente opacos tampoco cambiaron en las tres variantes verticales en cada tamaño; esos límites de píxeles por umbral no son la misma medida que las extensiones exactas de los vértices del contorno. Estas observaciones se limitan a nuestro origen creado y navegador, no son un certificado de compatibilidad de renderizadores.

Revisa el destino guardado antes de entregar

Conserva el emblema original como referencia geométrica y guarda el tratamiento de pintura en una copia separada. Un servidor de pintura repetida no convierte cada motivo visible en una forma independiente que una cortadora o editor posteriores puedan seleccionar. Si ese destino requiere geometría expandida, prepárala e inspecciónala por separado. La guía de edición SVG cubre cambios de origen más generales.

Si el contorno gira de forma inesperada, revisa las transformaciones de su grupo y sus antecesores antes de ajustar el patrón. Si varias copias inline comparten inesperadamente un tratamiento de pintura, asigna nombres únicos a sus ID de patrón y referencias de relleno correspondientes. Nuestro archivo de comparación aísla esos ID; los SVG independientes separados no comparten ese espacio de nombres de recursos del documento.

Si tu motivo o emblema personalizado solo existe como PNG o JPG y necesitas contornos editables, prepara un SVG con PerfectVector, inspecciona el contorno y la abertura, y conserva un maestro limpio. Después construye la repetición y elige su transformación de pintura en tu código SVG. La vectorización prepara el diseño; no diseña la repetición, elige su fase ni garantiza el tratamiento de patrones del destino. Los trazados limpios existentes pueden pasar directamente a editar el patrón; la guía de vectorización explica cuándo sirve convertir un ráster.

Preguntas frecuentes

¿patternTransform cambia los datos del trazado de mi emblema? En este ejemplo transforma la pintura del patrón. La cadena d del emblema no cambia. Revisa también las transformaciones del grupo receptor y sus antecesores, ya que la geometría mostrada puede moverse sin cambiar d.

¿Puedo desplazar un patrón sin girarlo? Sí. La variante translate(7 5) desplaza su pintura y mantiene la orientación del motivo. Conserva fijas las dimensiones de celda y la geometría receptora al probar el efecto.

¿Por qué también gira el patrón cuando giro todo el grupo? La transformación del grupo cambia la geometría receptora mostrada y su pintura. Es una operación diferente de colocar una transformación solo en el elemento pattern.

¿Los motivos repetidos son trazados editables separados? Nuestro origen tiene un trazado de motivo en un servidor de pintura y un trazado de emblema receptor. Las repeticiones visibles no son elementos de trazado creados por separado; expándelas e inspecciónalas por separado si el destino requiere ese formato.

Fuentes

1. MDN — patternTransform — Listas de transformaciones de patrón y nota de implementación del atributo.
2. W3C — Patrones SVG2 — Sistemas de coordenadas de la celda y transformación de pintura.
3. MDN — fill-rule — Abertura par-impar en el trazado receptor.
4. MDN — transform — Rotación aplicada a la geometría mostrada del grupo.
5. MDN — patternUnits — Sistema explícito de coordenadas de celda mantenido fijo en esta comparación.