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:
<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