Diseño de gráficos vectoriales escalables (SVG) con CSS
Hoy vamos a continuar nuestra discusión sobre el gráfico vectorial escalable (SVG), y como hemos señalado en nuestra publicación anterior, una de las ventajas de usar SVG es que se puede diseñar con CSS.
Propiedades de estilo SVG
El estilo SVG básicamente funciona de la misma manera que en los elementos HTML normales, de hecho, también compartían algunas propiedades comunes. Sin embargo, hay otras propiedades que están destinadas específicamente para el objeto SVG que tienen su propia especificación aparte de CSS.
Por ejemplo, en el elemento HTML normal, podemos agregar color de fondo con color de fondo o fondo Propiedad CSS. En SVG, es un poco diferente; el color de fondo se especifica con el llenar propiedad en su lugar. Además, el borde del elemento se especifica con carrera propiedad y no está con el frontera como hicimos en HTML normal, puedes ver la lista completa aquí.
Si ha estado trabajando con el editor de vectores como Adobe Illustrator bastante tiempo, puede adivinar rápidamente que el mecanismo de denominación de propiedades en SVG se origina en el editor.
Implementación de estilo SVG
Podemos usar una de las siguientes formas para diseñar el elemento SVG;
Atributos de presentación
Si ha visto toda la lista de propiedades de SVG, todas se pueden agregar directamente en el elemento para alterar la presentación del elemento. El siguiente ejemplo muestra cómo podemos agregar llenar y carrera propiedad directamente en un rect elemento;
El rectángulo se verá como la captura de pantalla siguiente;
Hoja de estilo en línea
También podemos añadir estilo con el estilo atributo. En el siguiente ejemplo también añadiremos llenar y carrera al rect, Pero esta vez lo añadimos dentro del estilo y girarlo con CSS3 transformar propiedad, como tal;.
El rectángulo girará en el mismo resultado, solo que ahora también está girado;
Hoja de estilo interna
Incruste el estilo SVG dentro del estilo Elemento también es posible y no es diferente de cómo lo hicimos en HTML normal. Este ejemplo a continuación muestra cómo agregamos estilos internos para afectar los elementos SVG en .html documento.
Sin embargo, SVG es un lenguaje basado en XML, por lo que cuando estamos a punto de agregar una hoja de estilo en línea en un .svg documento, tenemos que poner la declaración de estilos dentro cdata, como sigue;
los cdata Aquí se requiere, ya que CSS puede tener > Carácter que entrará en conflicto con los analizadores XML. Utilizando cdata es muy recomendable para incrustar estilos en SVG, incluso si el carácter conflictivo no aparece en la hoja de estilos.
Hoja de estilo externa
La hoja de estilo externa también funciona de la misma manera para los elementos SVG en .html documento.
De nuevo en .svg documento, necesitamos referir la hoja de estilo externa como hoja de estilo xml, al igual que.
Agrupando Elementos
Los elementos SVG se pueden agrupar con el
Tanto el rectángulo como el círculo tendrán el mismo resultado..
Pensamiento final
Hemos recorrido todos los aspectos esenciales sobre el estilo SVG con CSS y esta es solo una de las ventajas de servir gráficos con SVG. En la próxima publicación veremos otra más, así que estad atentos..
- Ver demostración
- Descargar fuente
