Duplicate (filter) id inline SVG

Question

При создании встроенного SVG с фильтрами я должен определить идентификатор фильтра.

Когда я автоматически генерирует несколько инлайн 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> 

Image 1 должен быть зеленого цвета (оттенок = 100) и изображение 2 должен быть синего цвета (оттенок = 200). Вместо этого оба изображения зеленые.

Я посылаю ниже обходной путь к этому вопросу, но я действительно хотел бы иметь более простое решение ...

Answer 1

Обойти это генерировать уникальный или случайный идентификатор фильтра для каждого 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> 

Это может показаться простым, но для меня это очень непрактично. Я хотел бы иметь решение без идентификаторов фильтров (я не думаю, что это возможно) или с дублирующимся идентификатором, но без преобладания (возможно, внедрено во что-то?).