Question

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

当我自动生成几个略有差异的内嵌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" 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但没有普遍性（可能嵌入某些东西？）。

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

1 个答案: