JavaScript xdiseñadores

Estilos CSS en SVG

Si estas famoiliarizado con los CSS, es posible emplearlo para modoficar el asdpecto de una forma SVG

Atributos CSS

Directamente incluimos los valores, como por ejemplo stroke y relleno:

<circle stroke="#000000" fill="#00ff00" />

No requiere ningún plugin para su visualización en las últimas versiones de los navegadores más populares.

Atributos y propiedades

Se puede emplear el atributo style y definir las propiedades y sus valores:

<circle style="stroke: #000000; fill:#00ff00;" />

Agregar un SVG en una página HTML

Es posible definir los estilos en una hoja de estilos CSS:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>círculo</title>
<style type="text/css" >
circle {
stroke: #006600;
fill: #00cc00;
}
</style>
</head>
<body>
<svg>
<circle cx="40" cy="40" r="24"/>
</svg>
</body>
</html>

Clase e ID

Se puede especificar, para un elemento concreto, empleando la clase o el ID:

<circle class="myGreen" cx="40" cy="40" r="24"/>
<circle id="myRed" cx="40" cy="100" r="24"/>

Listado de propiedades CSS

CSS Property Description
fill relleno de color
fill-opacity opacidad
fill-rule Sets fill rule of the shape.
marker modos de borde
marker-start inicio borde
marker-mid bordes
marker-end final borde
stroke color de la línea
stroke-dasharray tipo de línea
stroke-linecap extremo de la línea, valores: round, butt and square.
stroke-linejoin esquinas de las líneas, valores: miter | round | bevel
stroke-miterlimit ángulo de la línea
stroke-opacity opacidad de la línea
stroke-width ancho de la línea
text-rendering calidad de la visualización

http://www.w3.org/TR/SVG/styling.html

<line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" stroke="black" stroke-width="1"/>

<line stroke-linecap="butt" x1="30" y1="30" x2="30" y2="90" stroke="black" stroke-width="20"/>

<line stroke-linecap="round" x1="60" y1="30" x2="60" y2="90" stroke="black" stroke-width="20"/>

<line stroke-linecap="square" x1="90" y1="30" x2="90" y2="90" stroke="black" stroke-width="20"/>

Más ejemplos en: http://tutorials.jenkov.com/svg/stroke.html

Lita completa de atributos del SVG en: https://developer.mozilla.org/es/docs/Web/SVG/Attribute