SVG CSS layout properties en WebKit Nightly

Archivado en: CSS3 SVG

La semana pasada se actualizó WebKit Nightly con una propiedad bastante interesante para modificar SVG a través de CSS.

Lo primero es tener actualizado WebKit Nightly, lo podéis descargar desde este enlace.

Ahora vamos a poder modificar a través de CSS los siguientes atributos de SVG como x, y, cx, cy, r, rx, ry, width y height.

En el ejemplo que vamos a ver a continuación tenemos cuatro rectángulos en un SVG

1 <rect id="uno" x="50" y="100" width="75" height="75" fill="crimson" stroke="darkorange" stroke-width="5" rx="2"/>
2 <rect id="dos" x="50" y="200" width="75" height="75" fill="crimson" stroke="darkorange" stroke-width="5"/>
3 <rect id="tres" x="50" y="300" width="75" height="75" fill="crimson" stroke="darkorange" stroke-width="5"/>
4 <rect id="cuatro" x="50" y="400" width="75" height="75" fill="crimson" stroke="darkorange" stroke-width="5"/>

A través de CSS vamos a modificar los bordes redondeados del primer rectángulo

1 #uno:hover {
2     rx: 250px;
3 }

Al segundo rectángulo le vamos a modificar el width y el height

1 #dos:hover {
2     width: 250px;
3     height: 15px;
4 }

Al tercer rectángulo le vamos a modificar su posición en la coordenada vertical

1 #tres:hover {
2     y: 600px;
3 }

Al cuarto rectángulo le vamos a modificar su posición en la coordenada horizontal

1 #cuatro:hover {
2     x: 250px;
3 }

Por último vamos a añadir la duración de la transición y su timing

1 rect {
2   transition-duration: 2s;
3   transition-timing-function:cubic-bezier(.17,.67,.83,.67);
4 }

A continuación os dejo un vídeo con todos los efectos del ejemplo

WebKit Layout Properties from Jorge Aznar on Vimeo.

Por último os dejo la demo que publicó Adobe Web Platform en CodePen

 
SCALABLE, un libro sobre SVGA lo largo de 15 capítulos, 120 páginas y más de 70 ejemplos vamos a ver todo lo que podemos hacer con SVG. Tu pones el precio, disponible desde 0$ para descargar desde LeanPub(PDF, ePUB y MOBI).