soy Kseso y esto EsCSS

La declaración css D: PATH() control del svg PATH y su attr D

La novedad de Blink dando soporte a la la nueva declaración CSS 'd: path()' para el manejo y control desde él del elemento SVG 'path'.

La declaración css D: PATH() control del svg PATH y su attr D

·Por Kseso ✎ 2
El atributo svg D como declaración css D: PATH()

Llegan buenas noticias en lo concerniente al manejo de los SVG´s desde CSS y los chicos de Blink (ya sabes, el motor tras Chrome).

Parece que hayan decidido adelantar los regalos de estas fechas que vienen en forma de añadir novedades para que podamos entretenernos un rato experimentando con ellas.

Así el anuncio de ayer (15/12(2015) sorprendió a la comunidad al anunciar que Cromium ya soporta como propiedad CSS d, que se corresponde con el atributo SVG del mismo nombre, y como valor para ella la función CSS path()

d: path(); Declaración CSS

Tengamos un típico SVG en nuestro documento en su mínima expresión:

<svg xmlns="http...> <path id="miId"/> </svg>

Lo más significativo es que este SVG está vacío. No dibujará nada pues no le hemos pasado ningún punto o coordenada para ello. Sólo tiene el atributo id='miId'.

Y es precisamente este 'id' el que usará CSS para actuar sobre él y poder indicar al navegador los puntos mediante la declaración d: path()

#miID { d: path(M626.2 249.2c-36.1,18.1 -80.6,-1.9...); /*otras declaraciones como stroke, fill...*/ }

d: path(); es animable

Esta nueva propiedad también es animable (animatable: yes). Por lo tanto puede ser usada en los frames de la propiedad @keyframes {}

#miID { animation: svgAnimado 1s ...; } @keyframes svgAnimado { 0% { d: path(/*relación de coordenadas iniciales*/); } 50% { d: path(/*relación de coordenadas intermedias*/); } 100% { d: path(/*relación de coordenadas finales*/); } }

Según me comentan los genios del SVG español Lionel y Jorge la animación que hace Cromium deja mucho que desear en estos momentos. La realiza a saltos. Esto es, pasa de un valor del 'path' a siguiente de forma brusca, no fluida calculando los puntos intermedios entre un frame y el siguiente.

En conversaciones con Lionel y Jorge me confirman que este comportamiento en la animación está presente con independencia de que el número de coordenadas sea el mismo o diferente (condición de 'clip-path').

Nos corrige Lionel este comportamiento. La animación sí interpola los puntos intermedios para que sea fluida. Gracias Lionel.

Y hasta aquí el anuncio.

Para saber más

Si quieres saber algo más sobre estas novedades te recomiendo lo siguiente:

  1. Soportado en Chrome Canary o
    Descarga y experimenta con Cromium
    ve a chrome://flags y ahí busca y activa la opción 'experimentos de Web Platform'.

  2. Blink implementa path en CSS

     artículo de Jorge Aznar sobre el particular.
    Plus: incluye demos suyas y de Lionel y vídeos de ellas para quien no tenga Chromium.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso