css - tag - svg text



CSS: prima su SVG in linea (1)

Aggiornare
Grazie per aver segnalato la relazione tra il contenuto generato e gli elementi sostituiti.
Ho trovato questo articolo che tratta proprio questo argomento:
http://red-team-design.com/css-generated-content-replaced-elements/

È interessante notare che un documento del W3C intitolato "Modulo CSS3 generato e sostituito" (da 11 anni!) Definisce lo pseudo-elemento :outside , che potrebbe offrire una soluzione per utilizzare il contenuto generato con elementi sostituiti, posizionando il contenuto generato all'esterno del elemento sostituito, invece di provare ad aggiungerlo all'interno.


Domanda originale

C'è un modo per disegnare un elemento SVG in linea usando il CSS :before e :after pseudo-elements?

Esempio: http://jsfiddle.net/wD56Q/

In questo esempio, lo stile definito con :before non è applicato a SVG (testato in Firefox 29 e Chrome 35). Riguarda la proprietà dei content in :before ? Per quanto leggo, cerca di inserire un contenuto generato nell'elemento .. è ciò che fallisce con SVG?


Documentazione correlata da MDN:

:: before (: before)

:: prima crea uno pseudoelemento che corrisponde al primo figlio dell'elemento. Spesso usato per aggiungere contenuti cosmetici a un elemento, utilizzando la proprietà content. Questo elemento è in linea per impostazione predefinita.

soddisfare

La proprietà CSS del contenuto viene utilizzata con gli pseudo-elementi :: before e :: after per generare contenuto in un elemento. Gli oggetti inseriti utilizzando la proprietà content sono elementi sostituiti anonimi.


Il codice nell'esempio:

   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>


No, SVG in linea viene trattato come un'immagine e le immagini vengono sostituite da elementi a cui non è consentito avere contenuto generato .

A rigor di termini, penso che sia indefinito. Il CSS 2.1 parla solo di "immagini, documenti e applet incorporati" in generale e lo standard HTML lo definisce per le immagini, ma non per SVG in modo esplicito.





pseudo-element