Qué propiedades SVG viven en CSS

La pregunta «puedo poner esto en CSS» tiene una respuesta binaria por atributo y casi nadie tiene la lista en la cabeza. Saberla ahorra horas, porque la mitad de los intentos fallidos de estilar un SVG son intentos de escribir desde CSS algo que nunca ha sido una propiedad. Y dentro de lo que sí lo es hay una trampa mayor que todas las demás juntas: transform funciona, pero su origen no está donde crees.

Pintura y trazo

Este es el bloque grande y el que se usa a diario. Todas son propiedades CSS de pleno derecho, todas se heredan salvo donde se indique, y todas admiten var(), transition y @media.

Tres apuntes prácticos sobre esta tabla.

stroke-dasharray acepta una lista con espacios o comas, y si la longitud de la lista es impar se duplica: stroke-dasharray: 5 equivale a 5 5, y 5 3 2 equivale a 5 3 2 5 3 2. Es una regla heredada de PostScript que sorprende la primera vez.

vector-effect: non-scaling-stroke es la propiedad que hace posible una rejilla de gráfico que no engorde al escalar el viewBox. No se hereda, así que hay que ponerla en cada elemento o usar un selector.

color-interpolation-filters no parece de este bloque y es la propiedad más importante que existe para los filtros, porque su valor inicial es linearRGB y eso hace que todo filtro escrito sin pensar salga con un aspecto distinto del esperado. Se trata en el nivel 22.

Texto y disposición

Y las de composición y efectos, que no heredan ninguna: opacity, clip-path, clip-rule (esta sí hereda), mask, filter, mix-blend-mode, isolation, display, visibility, pointer-events, cursor, overflow.

Las de gradientes y filtros: stop-color, stop-opacity, flood-color, flood-opacity, lighting-color. Todas son propiedades, lo que significa que puedes tematizar un gradiente desde CSS sin tocar el marcado, y eso es más útil de lo que parece.

:root { --acento: #89b4fa; }
[data-tema="calido"] { --acento: #fab387; }

#gradiente stop:first-child { stop-color: var(--acento); }
#gradiente stop:last-child  { stop-color: transparent; }

Lo que nunca ha sido una propiedad

Esta lista es igual de importante y más corta:

• viewBox, preserveAspectRatio
• d (en los motores donde existe como propiedad, no está en los tres; no dependas de ello)
• points
• x1, y1, x2, y2 de un gradiente; cx, cy, r, fx, fy, fr de un radial
• gradientUnits, gradientTransform, spreadMethod
• patternUnits, patternContentUnits, patternTransform
• clipPathUnits, maskUnits, maskContentUnits
• filterUnits, primitiveUnits, y todos los atributos de las primitivas (stdDeviation, in, result, values…)
• refX, refY, markerWidth, markerHeight, orient, markerUnits
• offset de un stop
• href, startOffset, textLength, lengthAdjust

Si tu tema necesita cambiar cualquiera de estos, la respuesta no es CSS: es generar marcado distinto o escribir el atributo desde JavaScript. Conviene saberlo antes de diseñar el sistema, no después.

Las propiedades de geometría

SVG 2 promovió a propiedades CSS los atributos geométricos de las formas: cx, cy, r, rx, ry, x, y, width, height. Con ellas puedes escribir esto:

.punto { r: 4; transition: r 150ms ease; }
.punto:hover { r: 7; }

Es una mejora real: una transición de radio sin JavaScript, con el interpolador del navegador. Firefox fue el último motor en implementarlas y hoy están disponibles en los tres, pero conviene tenerlo presente si tu matriz de soporte incluye versiones antiguas; la degradación es benigna, porque el atributo sigue funcionando y solo se pierde la transición.

Dos límites que no son de soporte sino de diseño. El primero: solo se aplican a los elementos que tienen esos atributos. Un path no tiene width. El segundo: cuando el valor viene de datos, sigue haciendo falta escribir el atributo desde JavaScript, así que las propiedades de geometría son para estados de interacción, no para el dato en sí.

transform, y el origen que no está donde crees

transform es una propiedad CSS y funciona sobre elementos SVG. También lo son translate, rotate y scale como propiedades independientes. Y aquí está la trampa que cuesta más tiempo de todo el nivel.

En HTML, transform-origin: 50% 50% significa el centro del propio elemento, porque transform-box vale border-box para las cajas. En SVG, el valor inicial de transform-box es view-box, es decir, el sistema de coordenadas del viewport SVG. Un transform-origin: 50% 50% sobre un circle no es el centro del círculo: es el centro del lienzo entero.

<svg viewBox="0 0 200 100" width="400">
  <rect class="mal"  x="20"  y="30" width="50" height="40" fill="#f38ba8" />
  <rect class="bien" x="120" y="30" width="50" height="40" fill="#a6e3a1" />
</svg>

.mal, .bien {
  transform-origin: 50% 50%;
  animation: girar 3s linear infinite;
}
/* La correccion: que el origen sea la caja del propio elemento */
.bien { transform-box: fill-box; }

@keyframes girar { to { transform: rotate(360deg); } }

El rojo describe una órbita alrededor del centro del lienzo. El verde gira sobre sí mismo. La única diferencia es transform-box: fill-box.