css - manipulation - svg on img tag

CSS: antes en SVG en línea

Question

Actualizar
Gracias porneL por señalar la relación entre el contenido generado y los elementos reemplazados.
Encontré este artículo que trata este mismo tema:
http://red-team-design.com/css-generated-content-replaced-elements/

Curiosamente, un documento del W3C titulado "Módulo de contenido generado y reemplazado CSS3" (de hace 11 años) define el pseudo-elemento :outside , que podría ofrecer una solución al uso de contenido generado con elementos reemplazados, colocando el contenido generado fuera del Elemento reemplazado, en lugar de intentar agregarlo adentro.

Pregunta original

¿Hay alguna manera de diseñar un elemento SVG en línea con CSS :before y :after pseudo-elements?

Ejemplo: http://jsfiddle.net/wD56Q/

En este ejemplo, el estilo definido con :before no se aplica al SVG (probado en Firefox 29 y Chrome 35). ¿Se trata de la propiedad de content en :before ? Por lo que leí, intenta insertar un contenido generado en el elemento ... ¿es eso lo que falla con SVG?

Documentación relacionada de MDN:

:: antes (: antes)

:: before crea un pseudo-elemento que es el primer elemento secundario del elemento coincidente. A menudo se usa para agregar contenido cosmético a un elemento, al usar la propiedad de contenido. Este elemento está en línea por defecto.

contenido

El contenido de la propiedad CSS se usa con los pseudo-elementos :: before y :: after para generar contenido en un elemento. Los objetos insertados usando la propiedad de contenido son elementos reemplazados anónimos.

El código en el ejemplo:

 svg {
left: 50px;
position: absolute;
top: 50px;
}
svg circle {
fill: green;
}
svg:before {
border: 2px solid blue;
content: "";
height: 100px;
margin: -6px;
padding: 4px;
position: absolute;
width: 100px;
z-index: -1;
}
div {
background-color: green;
height: 100px;
left: 200px;
position: absolute;
top: 150px;
width: 100px;
}
div:before {
border: 2px solid blue;
content: "";
height: 100px;
margin: -6px;
padding: 4px;
position: absolute;
width: 100px;
z-index: -1;
}

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" />
</svg>
<div></div>

Answer 1

No, el SVG en línea se trata como una imagen, y las imágenes son elementos reemplazados que no tienen permitido generar contenido .

Estrictamente hablando, creo que no está definido. CSS 2.1 solo habla de "imágenes, documentos incrustados y applets" en general y el estándar HTML lo define para las imágenes, pero no para SVG explícitamente.