When creating an embedded SVG with filters, I have to define an identifier for the filter.
When I automatically generate several built-in SVGs with slight differences, the filter of the first image prevails (overwrites) the filter of the following images (due to identifiers of repeated filters ).
Live demo much 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 am sending below a workaround to this problem, but I really would like to have a simpler solution ...
source share