フィルターを使用してインライン 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) である必要があります。代わりに、両方の画像が緑色です。
この問題の回避策を以下に送信しますが、もっと簡単な解決策が欲しいです...