Cambio SVG color de relleno :antes de o :después de CSS

Tengo un gráfico SVG poner como este:

a::before { content: url(filename.svg); }

Cuando me pase el ratón sobre la etiqueta, realmente quiero que el SVG para cambiar el color de relleno, sin cargar un nuevo archivo SVG, como la que tengo ahora:

a:hover::before { content: url(filename_white.svg); }

Es posible de lograr mediante JavaScript, jQuery o simplemente puro CSS que yo no soy consciente de que?

Gracias.

Maniupolating :before y/o :after pseudo-elementos no es posible a través de JavaScript. No existen en el DOM.
posibles duplicados de el Cambio de ancho de propiedad de un :antes de selector css con JQuery
No estoy seguro, pero tal vez este le ayudará a
tal vez acepta mi respuesta en vez @mnsth?

OriginalEl autor mnsth | 2014-02-02

1 Kommentar

  1. 14

    El uso de la content propiedad genera (no expuestos) marcado funcionalmente equvialent a un svg en un <img> elemento.

    No puede aplicar estilo a los elementos dentro del documento svg porque:

    1. estilos no son permitidos en cascada a través de los documentos
    2. cuando el uso de <img> (o content, o cualquier imagen css la propiedad que hace referencia a svg) el documento svg no está expuesto por los navegadores debido a preocupaciones de seguridad

    Preguntas similares, pero para background-image aquí y aquí.

    Entonces, para hacer lo que usted quiere, usted debe obtener alrededor de los dos puntos por encima de alguna manera. Hay varias opciones para hacerlo, e.g uso en línea svg, mediante el uso de filtros (aplicado a la <img>) o a la generación de diferentes archivos svg (o data URIs), como en su pregunta.

    OriginalEl autor Erik Dahlström

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea