http://jsfiddle.net/xMnea/4/で示されているように、それぞれ独自のクラス属性を持つ複数の要素を含むシンボルを定義しました。本体では、シンボルを複数回使用しています。私はインライン CSS を使用して、各用途を個別にスタイル設定しています。
Firefox 15 では期待どおりに動作しますが、IE9 と Chrome では黒い四角が表示されます。後者のブラウザは、シンボル内のクラス定義を検出/認識しないようです。構造がインライン (右下の四角形) の場合、期待どおりに機能します。
これは単純に Firefox が他のものより準拠しているということですか、それとも個々のスタイル設定を許可しながら SVG 要素を再利用するためのより良い方法はありますか?
追加情報: シンボルではなく "defs" を使用した場合、またはインラインではなく外部スタイル シートを使用した場合、同じ問題が発生します。