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
2
3
4
<rect id="uno" x="50" y="100" width="75" height="75" fill="crimson" stroke="darkorange" stroke-width="5" rx="2"/>
<rect id="dos" x="50" y="200" width="75" height="75" fill="crimson" stroke="darkorange" stroke-width="5"/>
<rect id="tres" x="50" y="300" width="75" height="75" fill="crimson" stroke="darkorange" stroke-width="5"/>
<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
2
3
#uno:hover {
rx: 250px;
}
Al segundo rectángulo le vamos a modificar el width y el height
1
2
3
4
#dos:hover {
width: 250px;
height: 15px;
}
Al tercer rectángulo le vamos a modificar su posición en la coordenada vertical
1
2
3
#tres:hover {
y: 600px;
}
Al cuarto rectángulo le vamos a modificar su posición en la coordenada horizontal
1
2
3
#cuatro:hover {
x: 250px;
}
Por último vamos a añadir la duración de la transición y su timing
1
2
3
4
rect {
transition-duration: 2s;
transition-timing-function:cubic-bezier(.17,.67,.83,.67);
}
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