Come applicare una classe CSS a un elemento di testo SVG

Okay ... Sto diventando pazzo qui. Ho iniziato a sperimentare con SVG. Lavorare con SVG e applicare le classi CSS funziona come un incantesimo. Non riesco a capire cosa sto facendo male, ma non riesco a far funzionare la classe su un elemento di testo svg. Ho messo a nudo tutta la strada verso il basso e questo è quello che ho ottenuto:Come applicare una classe CSS a un elemento di testo SVG

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='UTF-8'> 
    <title>Playground</title> 
</head> 
<body> 
    <style type="text/css"> 
     .mainsvg { 
      height: 320px; 
      border: 1px solid red; 
      width: 400px; 
     } 
     .caption { 
      color: yellow; 
     } 
    </style> 
    <h2>SVG - Sandbox</h2> 
    <div> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg"> 
      <text x="65" y="40" class="caption">Fact</text> 
     </svg> 
    </div> 
</body> 
</html>

Secondo http://www.w3.org/TR/SVG/styling.html#ClassAttribute questo dovrebbe funzionare ...

Eventuali suggerimenti/consigli su cosa cambiare, o in alternativa?

fonte

2013-07-04 Bastiaan Linders

Se leggo il collegamento w3 non è possibile impostare il bordo. si chiama ictus. –

Bene, il confine funziona bene. Il tratto è usato per tutto ciò che effettivamente "disegna". Ma la mia domanda riguarda la classe sull'elemento di testo, in cui ho impostato il colore del testo proprio come nel collegamento w3. –

L'impostazione della classe è corretta ma la proprietà del colore CSS non ha alcun effetto su SVG. SVG utilizza le proprietà fill e stroke. Nel tuo caso probabilmente hai solo bisogno di cambiare colore per riempire. Questo visualizza testo giallo per me in Firefox.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='UTF-8'> 
    <title>Playground</title> 
</head> 
<body> 
    <style type="text/css"> 
     .mainsvg { 
      height: 320px; 
      border: 1px solid red; 
      width: 400px; 
     } 
     .caption { 
      fill: yellow; 
     } 
    </style> 
    <h2>SVG - Sandbox</h2> 
    <div> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg"> 
      <text x="65" y="40" class="caption">Fact</text> 
     </svg> 
    </div> 
</body> 
</html>

fonte

2013-07-04 10:05:36

Provato e no ... E ricorda. Il colore è quello che danno come esempio alla raccomandazione W3. L'ho ridotto a colori per ottenere l'implementazione più facile da testare. –

Ben fatto, hai trovato un bug nelle specifiche SVG. L'ho segnalato a w3c: http://lists.w3.org/Archives/Public/www-svg/2013Jul/0001.html –

Bene, no. Sono d'accordo che c'è un bug. Ma non è nella documentazione. Esprimono in modo basilare ciò che dovrebbe essere. Sembra che tutti i browser non siano riusciti a implementarlo. Il che mi sembra molto improbabile. E ricorda, non funziona neanche con il riempimento o l'ictus. Sembra che il selettore di classe css sia completamente ignorato (chrome, FF e IE10). –

Come applicare una classe CSS a un elemento di testo SVG

risposta

Problemi correlati