feFloodフィルターを適用すると、<tspan>は期待どおりに機能しません

Question

フィルターを使用して、text要素の1つの単語にのみ背景色を適用しようとしています。

何が起こっているのかは、洪水がすべての親要素を埋めることであり、テキストの一部を隠すことさえあります。

DEFS

<filter x="0" y="0" width="1" height="1" id="colorMe"> 
    <feFlood flood-color="red"/> 
    <feComposite in="SourceGraphic"/> 
</filter> 

STYLE

.colorMe { 
     filter: url(#colorMe); 
     fill: #ccc; 
    } 
text{ 
    fill: #fff; 
    font: 40px Verdana, Helvetica, Arial, sans-serif; 
} 

私は、私はそれだけでtspanを埋めるだろうと推測フラッディングするx,y,width,heightが含まれていなかったとして - それは、クラスとしてこれらを含めることは困難ですさまざまなサイズの要素に動的に追加されます

ただ1つの単語に背景色を追加する方法はありますか？

コード以下のスニペットとhere's a fiddle too

ALL CODE

<?xml version="1.0"?> 
 
<svg width="450" height="40" viewBox="0 0 450 40" 
 
    xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
\t <defs> 
 
\t <filter x="0" y="0" width="1" height="1" id="colorMe"> 
 
     <feFlood flood-color="red"/> 
 
     <feComposite in="SourceGraphic"/> 
 
     </filter> 
 
\t </defs> 
 
    <style> 
 
    .colorMe { 
 
\t \t filter: url(#colorMe); 
 
\t \t fill: #ccc; 
 
\t } 
 
text{ 
 
    fill: #fff; 
 
    font: 40px Verdana, Helvetica, Arial, sans-serif; 
 
} 
 
\t </style> 
 
    <text x="15" y="30">You are 
 
    \t <tspan class="colorMe">not</tspan> 
 
    \t me 
 
    </text> 
 
</svg>

Answer 1

はそれのブラウザでは、フィルタは<tspan>かに有効であるかどうかに合意していないようです。

この仕様では、フィルタは「コンテナ要素（マスクを除く）とグラフィック要素」に適用されます。技術的には<tspan>はどちらのカテゴリにもありません。

Firefox開発者は、フィルタがtspansで有効ではないと判断しました（this bugzilla bug参照）。

あなたのテストはIEで正常に動作します。

Chromeは動作するはずだと思っているようです。現時点では間違いありません。私はあなたのためにbug report in Chromeを提出しました。