Uso de Hojas de Estilo

Los dibujos SVG pueden utilizar hojas de estilo en cascada CSS (Cascading Style Sheets) para controlar la presentación de los objetos del dibujo. El manejo de hojas de estilo en Inkscape se encuentra en una fase inicial. Sin embargo, es posible hacer algunas cosas sencillas y útiles. Por el momento, Inkscape solo puede manejar una hoja de estilo interna. No es posible utilizar hojas de estilo externas.

En el siguiente ejemplo, se utiliza una CSS para cambiar la opacidad de un cuadrado azul cuando el cursor pasa por encima de él (siempre que el dibujo se visualice con un navegador con capacidad para interpretar y manejar archivos SVG).

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.0"
   width="150"
   height="150"
   id="svg1341">
  <defs
     id="defs1343" />
  <style     1
     id="style1324"
     type="text/css">
     rect:hover {fill-opacity:1.0;}     2
  </style>
  <g
     id="layer1">
    <a
       xlink:href="http://www.w3.org/"
       style="fill-opacity:0.75"     3
       id="a1445">
      <rect
         width="90"
         height="90"
         x="30"
         y="30"
         style="fill:#0000ff;stroke:#000000;stroke-width:1px"     4
         id="rect1353" />
    </a>
  </g>
</svg>
  

1

Principio de la hoja de estilo.

2

Declaración de la pseudo-clase hover para el rectángulo (es decir, cuando el cursor del ratón está encima del rectángulo).

3

Opacidad predefinida del rectángulo.

4

Estilo del rectángulo. Es importante resaltar que el atributo fill-opacity no está definido en esta línea. Esto permite que los atributos de clase puedan ser anulados.

El atributo de estilo (style) se puede añadir mediante un editor de texto, o bien con un poco de dificultad con el cuadro de diálogo Editor XML de Inkscape (Edición icon Editor XML... (Mayús.+Ctrl+X)). El atributo fill-opacity se debe cambiar de posición: hay que sacarlo fuera de la definición del rectángulo y colocarlo dentro de una envoltura (wrapper) del rectángulo.

Estos son los pasos que hay que seguir para añadir una hoja de estilo mediante el cuadro de diálogo Editor XML:

  1. Abrir el cuadro de diálogo Editor XML.

  2. Seleccionar la entrada <svg:svg> de mayor nivel.

  3. Hacer clic sobre el icono icon Nuevo nodo de elemento.

  4. Introducir el texto svg:style en la caja de entrada, y hacer clic sobre el botón Crear.

  5. Arrastrar el nuevo nodo hasta colocarlo por encima del primer nodo <svg:g> (capa1).

  6. Seleccionar el nodo <svg:style>.

  7. Introducir el texto type en la línea de entrada Nombre de atributo (en el centro del cuadro de diálogo).

  8. Introducir el texto text/css en el recuadro de entrada Valor del atributo (en la parte inferior del cuadro de diálogo).

  9. Hacer clic sobre el botón Aceptar.

  10. Hacer clic sobre el icono icon Nuevo nodo de texto.

  11. Introducir el texto rect:hover {fill-opacity:1.0;} en el área derecha del cuadro de diálogo, con un retorno de carro (tecla Intro) antes y después del texto (así se eliminan las comillas).

  12. Hacer clic sobre el triángulo del nodo <svg:g id="layer1"> para desplegarlo.

  13. Hacer clic sobre el triángulo del nodo <svg:a> para desplegarlo.

  14. Seleccionar el rectángulo, seleccionar el atributo style, seleccionar en el recuadro inferior el texto fill-opacity:0.75; y cortarlo (Ctrl+X).

  15. Seleccionar el nodo <svg:a>, introducir en la línea de entrada Nombre de atributo el texto style, y después pegar (Ctrl+V) el texto "fill-opacity:0.75" dentro del recuadro de entrada Valor del atributo (en la parte inferior del cuadro de diálogo).

  16. Guardar el archivo, pero NO guardarlo como en formato SVG plano, ya que al guardarlo en este formato se elimina el atributo hover del nodo de estilo CSS. (Error de programación)