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

【问题标题】：Duplicate (filter) id of inline SVG内联 SVG 的重复（过滤器）ID
【发布时间】：2013-05-06 00:26:05
【问题描述】：

在创建带有过滤器的内联 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 应为绿色（hue=100），图片 2 应为蓝色（hue=200）。相反，这两个图像都是绿色的。

我在下面发送了解决此问题的方法，但我真的很想有一个更简单的解决方案...

【问题讨论】：

标签： html dom svg

【解决方案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 但没有普遍性（可能嵌入到某些东西？）的解决方案。

【讨论】：

您所描述的未来可能会成为可能，请参阅dvcs.w3.org/hg/FXTF/raw-file/tip/masking/…（child 关键字），但尚未在浏览器中实现。因此，现在您需要生成唯一 ID 才能使其正常工作。