Tutoriales de SVG

Elementos SVG

Atributo de trazo SVG Elemento <use> SVG

Estilos CSS de SVG

Podemos usar CSS para configurar el estilo de las formas SVG. El estilo es cambiar la apariencia de la forma. Esto puede ser el color y el ancho del trazo, el color de relleno, la opacidad y muchas otras propiedades de la forma.

Hay6Este tipo de estilo puede configurar las formas en la imagen SVG. Cada uno se presentará en este artículo. Al final de este artículo, encontrará una lista de propiedades CSS que se pueden usar con SVG.

Uso de las propiedades de estilo CSS

¿Se puede usar una propiedad de estilo específica (por ejemplo, stroke y fill) para estilizar las formas SVG. Aquí hay un ejemplo:

Ejemplo

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24"　stroke="#000000"　fill="#00ff00"　/>
</svg>

Prueba a ver‹/›

Aunque hay una serie de propiedades de estilo disponibles. Sin embargo, se recomienda usar una tabla de estilos en línea o externa, por lo que no voy a introducir demasiado las propiedades de estilo aquí.

Uso de la propiedad style y las propiedades CSS

Este método no utiliza ninguna propiedad específica del estilo. En su lugar, utiliza la propiedad style y especifica las propiedades CSS dentro de ella. Si necesita incrustar estilos directamente en el estilo, este método es superior a las propiedades específicas, ya que puede aprender los nombres de las propiedades CSS. Las propiedades CSS en las tablas de estilos internas o externas son las mismas, por lo que copiar y pegar y aprender este tipo de contenido es más fácil.

Este es un círculo que se configura con el atributo style y las propiedades CSS para el contorno y el relleno:

Ejemplo

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="40" cy="40" r="24"　style="stroke:　#000000;　fill:#00ff00;"　/></svg>

Prueba a ver‹/›

Uso de tabla de estilos en línea

Se puede definir el estilo de la forma en una tabla de estilos incrustada y luego aplicar automáticamente todos estos estilos a la forma. Aquí hay un ejemplo:

Ejemplo

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<style　type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle {
　　　　　　　　　　　stroke: #006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　]]>
　　　　</style>
　　　　
　　　　<circle　　cx="40" cy="40" r="24"/>
</svg>

Prueba a ver‹/›

Atención en cómo se define el estilo del elemento circle dentro del elemento <style>. Esto funciona de la misma manera que en HTML y CSS.

内部样式表在Internet Explorer 7和Firefox 3.0.5中均能正常工作。

效果如下:

class类属性

可以class将形状中的属性用于选择该形状的样式，而不是将样式应用于特定类型的所有形状（例如，所有圆形）。就像class在HTML元素中使用属性一样。

这是两个圆圈样式的示例-绿色和红色。<circle>使用以下class　属性，将这两种样式中的每一种都应用于各自的元素：

Ejemplo

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<style　type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle.myGreen　{
　　　　　　　　　　　stroke: #006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　　circle.myRed　{
　　　　　　　stroke:　#660000;
　　　　　　　fill:　　　#cc0000;
　　　　}
　　　　　　]]>
　　　　</style>
　　　　<circle　　class="myGreen"　cx="40" cy="40"　　r="24"/>
　　　　<circle　　class="myRed"　　　cx="40" cy="100" r="24"/>
</svg>

Prueba a ver‹/›

请注意circle，样式表中的选择器名称如何带有.myGreen和后缀.myRed。现在，<circle>元素可以使用class="myGreen" 定义绿色或 class="myRed"定义红色圆圈样式。

使用外部样式表

使用外部样式表时，样式表会放在一个单独的文件中，然后放在Web服务器上，就像HTML页面的外部CSS文件一样。另外，在<svg>元素之前，您需要在SVG文件中包含以下声明：

Ejemplo

<?xml-stylesheet　type="text/css"　href="svg-stylesheet.css"　?>

该处理指令告诉SVG查看器使用CSS样式表找到文件“ svg-stylesheet.css”。

这是一个在SVG文件中使用声明的示例：

Ejemplo

<?xml-stylesheet　type="text/css"　href="svg-stylesheet.css"　?>
<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle cx="40" cy="40" r="24"
　　　　　　　style="stroke:#006600;　fill:#00cc00"/>
</svg>

注意：外部CSS样式表在Internet Explorer 7中似乎可以正常工作，但在Firefox 3.0.5中则不能。

在HTML页面中使用样式表。

Si se嵌入SVG图像到HTML页面中，还可以将SVG图像的样式表嵌入HTML页面中。这是一个示例：

Ejemplo

<html>
<body>
<style>
</style>
<svg
</svg>
</body>
</html>

Prueba a ver‹/›

Para agregar estilo a las formas dentro de una imagen SVG, simplemente agregue propiedades CSS estándar en el elemento style. Puede usar los selectores CSS habituales para establecer el estilo de los elementos SVG. Este es un ejemplo de página HTML, donde el elemento circle se estila mediante una tabla de estilos CSS dentro de la página HTML:

Ejemplo

<html>
<body>
<style>
　　circle {
　　　　　stroke: #006600;
　　　　　fill : #00cc00;
　　}
</style>
<svg
　　<circle cx="40" cy="40" r="24"　/>
</svg>
</body>
</html>

Prueba a ver‹/›

Si se inserta directamente una imagen SVG en una página HTML, esto puede ser el método más simple para establecer el estilo de la forma SVG.

Sobrescribir la tabla de estilos localmente en la forma

Si se ha establecido el estilo en una tabla de estilos, se puede sobrescribir este estilo configurando nuevas propiedades de estilo locales dentro de la forma que se desea estilizar. Los estilos configurados localmente dentro de la forma tienen siempre prioridad sobre los estilos definidos en tablas de estilos internas o externas.

Propiedades CSS de SVG

Los elementos SVG tienen las siguientes propiedades CSS que se pueden configurar. No todos los elementos tienen todas estas propiedades. Por lo tanto, las propiedades CSS se dividen en múltiples tablas para diferentes elementos.

Propiedades CSS de la forma

Las propiedades CSS de los elementos de la sección path y otros elementos de forma:

Atributos CSS	Descripción
fill	Establecer el color de relleno de la forma.
fill-opacidad	Establecer la opacidad de relleno de la forma.
fill-rule	Establecer la regla de relleno de la forma.
marker	Establecer el marcador utilizado para la línea (borde) de esta forma.
marker-start	Establecer el marcador de inicio utilizado para la línea (borde) de esta forma.
marker-mid	Establecer el marcador de medio utilizado para la línea (borde) de esta forma.
marker-end	Establecer el marcador de final utilizado para la línea (borde) de esta forma.
stroke	Establecer el color del trazo (línea) utilizado para dibujar el contorno de esta forma.
stroke-dasharray	Establecer el trazo (dashed) utilizado para dibujar el contorno de esta forma.
stroke-dashoffset	Establecer la cantidad de desplazamiento del trazo (línea) utilizado para dibujar el contorno de esta forma.
stroke-linecap	Establecer el extremo del trazo (línea) utilizado para dibujar el contorno de esta forma. Los valores válidos son round, butt y square.
stroke-miterlimit	Establecer la limitación de la muesca del trazo (línea) utilizado para dibujar el contorno de esta forma.
stroke-opacidad	Establecer la opacidad del trazo (línea) utilizado para dibujar el contorno de esta forma.
stroke-width	Establecer el ancho de trazo (línea) utilizado para dibujar el contorno de esta forma.
text-rendering	Establecer el renderizado de texto utilizado para dibujar el contorno de esta forma.

Atributos CSS de texto

Atributos CSS del elemento de texto:

Atributos CSS	Descripción
alineación-línea base	Establecer las coordenadas x e y de alineación del texto.
línea base-desplazamiento	Establecer el desplazamiento de la línea base utilizado para la presentación del texto.
dominante-línea base	Establecer la línea base principal.
glifo-orientación-horizontal	Establecer la dirección horizontal del tipo de letra.
glifo-orientación-vertical	Establecer la dirección vertical del tipo de letra.
kerning	Establecer el espaciado de puntuación del texto (el espaciado es el espacio entre las letras).

Atributos CSS de la transición

Atributos CSS de la transición de SVG:

Atributos CSS	Descripción
detención-color	Establecer el color final utilizado en el elemento de detención utilizado en la transición.
detención-opacidad	Establecer la opacidad de detención utilizada en los elementos utilizados en la transición.

Atributo de trazo SVG Elemento <use> SVG