2011-06-29 12 views
14

HTMLでは、スタイルからコンテンツを分離することをお勧めします。したがって、あなたのスタイル用の外部CSSファイルを作成する必要があります。私がSVGを使い始めたばかりなので、今私は不思議です:このルールはSVGにも適用されますか?SVG:アトリビュートまたはCSSを使用してスタイルを設定しますか?

より良いコードスタイルとは何でしょうか?それはコンテンツだかのプレゼンテーション場合

  • <circle fill="yellow" />
  • または<circle style="fill: yellow;" />

答えて

10

私は一般的に<circle fill="yellow" />から<circle style="fill: yellow;" />を好んでいます。なぜなら、短くて操作が簡単で、たとえばgetAttributeNS(null, "fill")です。

しかし、それの上に、私は、ちょうどHTMLと同じように、別のスタイル要素を使用して希望例えば:などが簡単にstlyeを変更することとしてCSSを使用して、すべての同じ利点を、持っている

<style> 
    circle{ 
     fill: yellow; 
    } 
    </style>  

一度にたくさんの要素。

また、外部ファイルにあなたのCSSを入れて追加することができます。

<?xml-stylesheet type="text/css" href="your_CSS.css" ?> 

SVG要素の前に。

+1

これはまた、繰り返す各属性を1つのスタイルに置き換えることによってSVGファイルを大幅に小さくできるという利点もあります。 –

3

違いが常にあります。

サークルがコンテンツであり、利用可能なCSSがあるかどうかを示す必要がある場合は、最初のオプションがそのオプションになります。

しかし、サークルがサイトdisignの一部であり、コンテンツに何も追加しない場合は、2番目のオプションにする必要があります。または、CSSクラスを使用します。

+4

良い引数ですが、やや言いたいことがあります:円が黄色であるという事実がコンテンツ(「The Simpsons」の文字の描画、おそらく)であれば、属性でなければなりません。円が黄色であるという事実が純粋に偶然である(そして、出版物の残りの部分が多くの黄色を使用しているという事実に帰せられる)場合、それはCSSにあるべきです。 –

11

属性やスタイルの優先順位が高いかどうかを覚えようとしていたので、ここに到着しました。これはあなたが1つを別のものにしたいと思う理由の1つです。

アトリビュートは、カスケードスタイルシートの最初のように、「プレゼンテーションヒント」として適用されます。 In other words, this gives them lowest precedence.

は、このように優先順位は、最低から最高まで、

  1. それは、インラインスタイルははるかに大きい少し混乱しているということ
  2. CSSスタイルシート
  3. インラインスタイル

属性でありますそれが隣にある属性より優先されます。 (私はこれを見なければならない!)

詳細はPresentation Attributes section of the SVG styling documentの最後にあります。

関連する問題