2011-06-29 20 views
14

En HTML, se recomienda separar el contenido del estilo, por lo tanto, debe crear archivos CSS externos para sus estilos. Como recién estoy empezando con SVG ahora me pregunto: ¿esta regla también se aplica a SVG?SVG: ¿Utiliza atributos o CSS para estilo?

¿Qué se considera un mejor estilo de código?

  • <circle fill="yellow" />
  • o <circle style="fill: yellow;" />

Respuesta

10

En general, preferiría <circle fill="yellow" /> a <circle style="fill: yellow;" /> porque es más corto y fácil de manipular, por ejemplo, con getAttributeNS(null, "fill").

Pero con el que preferiría el uso de un elemento de estilo separada, al igual que con HTML, por ejemplo:

<style> 
    circle{ 
     fill: yellow; 
    } 
    </style>  

que tiene todas las mismas ventajas de utilizar CSS, como por lo que es fácil de cambiar el stlye de muchos elementos a la vez.

También se puede poner el CSS en un archivo externo y añadir:

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

Antes de que el elemento de SVG.

+1

Esto también tiene la ventaja de que potencialmente puede hacer que los archivos SVG sean mucho más pequeños al reemplazar cada atributo repetitivo con un estilo único. –

3

La diferencia es siempre si se trata de contenido o de presentación.

Si el círculo está contenido y tiene que mostrar si hay css disponible o no, entonces la primera opción es la indicada.

Pero si el círculo es solo parte del diseño del sitio y no agrega nada al contenido, entonces debería ser la segunda opción. O usa una clase css.

+4

Buen argumento, pero me gustaría expresarlo de otra manera: si el hecho de que el círculo es amarillo es contenido (un dibujo de un personaje de "Los Simpson", tal vez), debería ser un atributo; si el hecho de que el círculo es amarillo es puramente accidental (y puede atribuirse al hecho de que el resto de la publicación usa mucho amarillo), debe estar en CSS. –

11

Llegué aquí porque estaba tratando de recordar si los atributos o los estilos tienen una mayor prioridad. Esta es una razón práctica por la que querrías una sobre otra.

Los atributos se aplican como "sugerencias de presentación", como si fueran los primeros en las hojas de estilos en cascada. In other words, this gives them lowest precedence.

Así, la precedencia, de menor a mayor, es

  1. atributos
  2. hojas de estilo CSS
  3. estilos en línea

Es un poco confuso que un estilo en línea tiene mucho mayor precedencia que el atributo al que está a continuación. (¡Sigo teniendo que buscar esto!)

Más detalles se pueden encontrar al final de Presentation Attributes section of the SVG styling document.

Cuestiones relacionadas