Vademecum de todas las propiedades de estilos del SVG 22.7.14
Relación de todas las propiedades de estilos aplicables a los SVG (gráficos vectoriales escalables) tanto propias como de CSS con enlace a su definición en la Especificación.
Vademecum de todas las propiedades de estilos del SVG
Relación de todas las propiedades Css que aplican a los SVG con enlace directo al punto de las especificaciones que desarrolla a cada una.
Recojo tanto las propias de SVG y que define la especificación de los vectores gráficos como aquellas "generales" de la especificación de Css (2.1 y 3) que son aplicables a los SVG.
Dice la especificación que desarrolla los SVG:
Propiedades de estilos de los SVG
SVG utiliza las propiedades de estilo para describir muchos de sus parámetros. Las propiedades de estilos definen cómo han de ser renderizados los elementos gráficos contenidos en el SVG. SVG utiliza las propiedades de estilo para lo siguiente:
- Parámetros que son claramente de naturaleza visual y por lo tanto se prestan a ser estilizados. Los ejemplos incluyen todos los atributos que definen cómo un objeto se "pinta", tales como los colores del relleno y del contorno, los anchos y estilo de línea.
- Parámetros que tienen que ver con el estilo de texto como las familias de fuentes y tamaños.
- Parámetros que afectan a la manera en que los elementos gráficos se representan, como los recortes (clipping paths), máscaras (masks), extremos de línea (arrowheads), marcadores (markers) y efectos de filtro (filter effects).
Excepto aquellas reglas/propiedades específicas definidas por la especificación propia del SVG, la definición de las propiedades de Css que aplican a los SVG son las que aparecen en el corpus de Css.
Propiedades de estilos compartidas
Las siguientes propiedades son compartidas entre CSS2 y SVG. La mayoría de estas propiedades se definen también en XSL:
- Font properties:
- Text properties:
-
Otras propiedades para medios visuales:
- ‘clip’, sólo aplicable a elementos svg externos.
- ‘color’, usada para proveer indirectamente un valor del color (currentColor) para ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’ y ‘lighting-color’ properties. (Las propiedades de SVG que soportan color y permiten especificar cuál son una extensión de CSS2 para dar cabida a las definiciones de color en los espacios de color arbitrarias. Ver Color profile descriptions.)
- ‘cursor’
- ‘display’
- ‘overflow’, sólo aplican a elementos que establecen un nuevo viewport.
- ‘visibility’
Propiedades definidas por SVG
Las siguientes propiedades de SVG no se definen en CSS2. Las definiciones normativas completas para estas propiedades se encuentran en la especificación de SVG:
- Clipping, Masking and Compositing properties:
- Filter Effects properties:
- Gradient properties:
- Interactivity properties:
-
Color and Painting properties:
- ‘color-interpolation’
- ‘color-interpolation-filters’
- ‘color-profile’
- ‘color-rendering’
- ‘fill’
- ‘fill-opacity’
- ‘fill-rule’
- ‘image-rendering’
- ‘marker’
- ‘marker-end’
- ‘marker-mid’
- ‘marker-start’
- ‘shape-rendering’
- ‘stroke’
- ‘stroke-dasharray’
- ‘stroke-dashoffset’
- ‘stroke-linecap’
- ‘stroke-linejoin’
- ‘stroke-miterlimit’
- ‘stroke-opacity’
- ‘stroke-width’
- ‘text-rendering’
- Text properties:
Una tabla que enumera y resume las propiedades de estilo la puedes encontrar en este enlace. Entre otras cosas tienes listadas por orden alfabético las propiedades por su nombre, con los valores posibles que admite y su valor inicial, así como a los elementos a los que se puede declarar y si es heredada y admite animaciones o no.
Créditos y origen de la información
Toda la información anterior proviene de la especificación (status Recomendación) sobre SVG 1.1 (2ª edicción) de Agosto de 2012. En concreto la puedes encontrar en su punto 6: Styling.
No recojo ni entro ni menciono las propiedades que pueden ser usadas como atributos del SVG y de sus elementos.
 tanto propias como de CSS con enlace a su definición en la Especificación.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso