CSSクラスをSVGテキスト要素に適用する方法

これはいいですね。私はSVGを試し始めました。 SVGを使ってCSSクラスを適用すると、魅力的に機能します。私は何が間違っているのか把握できませんが、私はちょうどクラスをsvgテキスト要素で作業するようにします。私はすべての方法ダウンし、それを取り除いてきたし、これは私が得たものである：CSSクラスを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>

http://www.w3.org/TR/SVG/styling.html#ClassAttributeによると、これは動作するはずです...

を変更するものに任意のヒント/ヒント、または代替手段は？

出典

2013-07-04 Bastiaan Linders

私がw3リンクを読むと、ボーダーを設定できません。ストロークと呼ばれています。 –

境界線はうまく動作します。ストロークは、実際に描画するすべてのものに使用されます。しかし、私の質問は、テキスト要素のクラスについてです。ここでは、w3リンクのようにテキストの色を設定します。 –

クラスの設定は正しいですが、CSSのカラープロパティはSVGには影響しません。 SVGはfillとstrokeのプロパティを使用します。あなたの場合は、色を変更するだけで済みます。これは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>

出典

2013-07-04 10:05:36

それを試してみてください...そして覚えています。色はW3勧告の例として与えられたものです。テストするための最も簡単な実装を得るために、色分けしました。 –

SVG仕様のバグを発見しました。私はw3cに報告しました：http://lists.w3.org/Archives/Public/www-svg/2013Jul/0001.html –

まあ、いいえ。私はバグがあることに同意します。しかし、それはドキュメントにはありません。彼らは基本的にそれが何であるべきかを述べている。すべてのブラウザがこれを実装できなかったようです。それは私にはほとんど起こりそうもないと思います。覚えておいても、塗りつぶしやストロークでは機能しません。 cssクラスセレクタは完全に無視されているようです（chrome、FF、IE10）。 –

CSSクラスをSVGテキスト要素に適用する方法

答えて

関連する問題