内联SVG的重复（过滤器）ID

Question

使用过滤器创建内联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）。相反，这两个图像都是绿色的。

我送一个解决方法下面这个问题，但我真的想有一个简单的解决方案...

Answer 1

解决方法是生成每个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，但没有流行（可能嵌入到东西？）的解决方案？