3

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

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

4

1 回答 1

3

解决方法是为每个 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 但没有普遍性（可能嵌入到某些东西中？）。

于 2013-05-11T12:38:26.423 回答