なぜSVG feColorMatrix + <use xlink：href = "＃" />がクリップされたパスになりますか？

Question

要素でフィルタを使用すると、セクションから参照される図形が異なるように見えます（クリップされます）。

• 白い星が（ "スパイク" のコーナー）が正しく表示され
• しかし、（フィルタリング）星が妙に

コード・スニペットクリップされ茶色：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> 
     <filter id="colorScheme"> 
      <feColorMatrix in="SourceGraphic" type="matrix" color-interpolation-filters="sRGB" values="0.5 0.0 0.0 0.0 0.0 0.0 0.3 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 1.0 0.0"/> 
     </filter> 
     <defs> 
      <g id="shape_star"> 
       <path d="M 50.000001,16.850071 60.828477,38.790929 85.041657,42.309326 67.520845,59.387917 71.656934,83.503263 50,72.117556 28.343064,83.503262 32.479155,59.387917 14.958344,42.309324 39.171522,38.790929 Z"/> 
      </g> 
      <g id="img_star_active"> 
       <use xlink:href="#shape_star" style="stroke: #FFFFFF; stroke-width: 10; fill: #FFFFFF;"/> 
      </g> 
      <g id="img_star_inactive"> 
       <use xlink:href="#shape_star" style="stroke: #FFFFFF; stroke-width: 10; fill: none; "/> 
      </g> 
     </defs> 
     <use xlink:href="#img_star_active" filter="url(#colorScheme)"/> 
     <use xlink:href="#img_star_inactive" transform="translate(100,0)" filter="url(#colorScheme)"/> 
     <use xlink:href="#img_star_active" transform="translate(0,100)" /> 
     <use xlink:href="#img_star_inactive" transform="translate(100,100)"/> 
    </svg> 

は、例を参照してください。 at https://jsfiddle.net/kx2zjnec/3/

Answer 1

フィルタ結果はclippedです。ソースグラフィックのバウンディングボックスに関連して記述されていますが、この場合はストロークの幅は含まれていません。私はこれがなぜ起こるか私は理解していない認めざるを得ないが、解決策は十分に簡単です：フィルタ領域の大きさを上げる（1バウンディングボックスの幅/高さ）：

<filter id="colorScheme" x="-0.2" y="-0.2" width="1.4" height="1.4"> 
     <feColorMatrix in="SourceGraphic" type="matrix" color-interpolation-filters="sRGB" values="0.5 0.0 0.0 0.0 0.0 0.0 0.3 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 1.0 0.0"/> 
    </filter>