3

フィルターを使用してインライン SVG を作成する場合、フィルターの ID を定義する必要があります。

わずかな違いがあるいくつかのインライン SVG を自動的に生成すると、最初の画像のフィルターが次の画像のフィルターよりも優先 (上書き) されます(フィルター IDが重複しているため)。

ライブデモ、はるかに明確: http://jsfiddle.net/9wqgS/

<p>Image 1 Hue = 100</p><p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120">
  <filter id="colorchangerfilter" x="0" y="0" width="1" height="1">
    <feColorMatrix id="huefilter" type = "hueRotate" values = "100"/>
  </filter>
  <image 
xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/archive/6/6e/20110118171033%21HTML5-logo.svg/120px-HTML5-logo.svg.png" width="120" height="120" filter="url(#colorchangerfilter)"/>
</svg>
</p><br>

<p>Image 2 Hue = 200</p><p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120">
  <filter id="colorchangerfilter" x="0" y="0" width="1" height="1">
    <feColorMatrix id="huefilter" type = "hueRotate" values = "200"/>
  </filter>
  <image 
xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/archive/6/6e/20110118171033%21HTML5-logo.svg/120px-HTML5-logo.svg.png" width="120" height="120" filter="url(#colorchangerfilter)"/>
</svg>
</p>

イメージ 1 は緑 (色相 = 100)、イメージ 2 は青 (色相 = 200) である必要があります。代わりに、両方の画像が緑色です。

この問題の回避策を以下に送信しますが、もっと簡単な解決策が欲しいです...

4

1 に答える 1

3

回避策は、SVG ごとに一意またはランダムなフィルター ID を生成することです。

<p>Image 1 Hue = 100</p><p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120">
  <filter id="colorchangerfilter-green" x="0" y="0" width="1" height="1">
    <feColorMatrix id="huefilter" type = "hueRotate" values = "100"/>
  </filter>
  <image 
xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/archive/6/6e/20110118171033%21HTML5-logo.svg/120px-HTML5-logo.svg.png" width="120" height="120" filter="url(#colorchangerfilter-green)"/>
</svg>
</p><br>

<p>Image 2 Hue = 200</p><p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120">
  <filter id="colorchangerfilter-blue" x="0" y="0" width="1" height="1">
    <feColorMatrix id="huefilter" type = "hueRotate" values = "200"/>
  </filter>
  <image 
xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/archive/6/6e/20110118171033%21HTML5-logo.svg/120px-HTML5-logo.svg.png" width="120" height="120" filter="url(#colorchangerfilter-blue)"/>
</svg>
</p>

それは簡単に聞こえるかもしれませんが、私にとっては非常に非現実的です。フィルター ID を使用しない (これは可能ではないと思います)、または ID が重複しているが普及していない (何かに埋め込まれている可能性があります) ソリューションが必要です。

于 2013-05-11T12:38:26.423 に答える