内联SVG的重复（过滤）ID [英] Duplicate (filter) id of inline SVG

问题描述

当使用过滤器创建内联SVG时，我必须为过滤器定义一个ID。

当我自动生成几个具有轻微差异的内联SVG时，第一张图片的筛选器占有（覆盖）以下图片的过滤器（因为重复的过滤器ID ）。

现场演示，更加清晰： http://jsfiddle.net/9wqgS/

 < p>图像1 Hue = 100< / p>< p> 
< svg xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkwidth =120height = 120 > 
< filter id =colorchangerfilterx =0y =0width =1height =1> 
< feColorMatrix id =huefiltertype =hueRotatevalues =100/> 
< / filter> 
< image 
 xlink：href =http://upload.wikimedia.org/wikipedia/commons/thumb/archive/6/6e/20110118171033%21HTML5-logo.svg/120px-HTML5- logo.svg.pngwidth =120height =120filter =url（#colorchangerfilter）/> 
< / svg> 
< / p>< br> 
 
< p> Image 2 Hue = 200< / p>< p> 
< svg xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkwidth =120height = 120 > 
< filter id =colorchangerfilterx =0y =0width =1height =1> 
< feColorMatrix id =huefiltertype =hueRotatevalues =200/> 
< / filter> 
< image 
 xlink：href =http://upload.wikimedia.org/wikipedia/commons/thumb/archive/6/6e/20110118171033%21HTML5-logo.svg/120px-HTML5- logo.svg.pngwidth =120height =120filter =url（#colorchangerfilter）/> 
< / svg> 
< / p>图像1应为绿色（色相= 100），图像2应为蓝色（色相= 200） 。相反，这两个图像都是绿色的。
 
 
 
我发送下面的解决方法到这个问题，但我真的想有一个更简单的解决方案... 
解决方案
解决方法是为每个SVG生成唯一或随机的过滤器ID。 
 < p> Image 1 Hue = 100< / p>< p> 
< svg xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkwidth =120height = 120 > 
< filter id =colorchangerfilter-greenx =0y =0width =1height =1> 
< feColorMatrix id =huefiltertype =hueRotatevalues =100/> 
< / filter> 
< image 
 xlink：href =http://upload.wikimedia.org/wikipedia/commons/thumb/archive/6/6e/20110118171033%21HTML5-logo.svg/120px-HTML5- logo.svg.pngwidth =120height =120filter =url（＃colorchangerfilter-green）/> 
< / svg> 
< / p>< br> 
 
< p> Image 2 Hue = 200< / p>< p> 
< svg xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkwidth =120height = 120 > 
< filter id =colorchangerfilter-bluex =0y =0width =1height =1> 
< feColorMatrix id =huefiltertype =hueRotatevalues =200/> 
< / filter> 
< image 
 xlink：href =http://upload.wikimedia.org/wikipedia/commons/thumb/archive/6/6e/20110118171033%21HTML5-logo.svg/120px-HTML5- logo.svg.pngwidth =120height =120filter =url（＃colorchangerfilter-blue）/> 
< / svg> 
< / p> 
  
这听起来很简单，但对我来说这是非常不切实际的。我想要一个没有过滤器ID的解决方案（我不认为这是可能的）或重复的ID，但没有流行（可能嵌入到某些东西？）。
 
When creating an inline SVG with filters, I have to define an ID for the filter.

When I automatically generates several inline SVG with slight differences, the filter of the first image prevails (overwrites) the filter of the following images (because of duplicate filters ID).

Live demo, far more clear: 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>
Image 1 should be green (hue=100) and image 2 should be blue (hue=200). Instead, both images are green.

I send below a workaround to this issue but I really would like to have a simpler solution...
解决方案
The workaround is to generate a unique or random filter ID for each SVG.
<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>
That may sound simple but for me it's very unpractical. I would like to have a solution without filter IDs (I don't think this is possible) or with duplicate ID but without prevalence (maybe embedded into something?).

                        
这篇关于内联SVG的重复（过滤）ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！