Как с помощью js ( jQuery) связать input и атрибут svg-фильтра?

Question

[Мари Арти]

jsfiddle.net/miminari13/XT9eN/8

Дано:
1) картинка, на которую накладывается два фильтра svg - яркость и контраст.
2) инпуты, с помощью ползунков которых можно менять непосредственно атрибуты svg (slope для яркости; slope и intercept для контраста) и, следовательно, настраивать яркость и контрастность картинки.

Вопрос: как связать инпуты и атрибуты svg-фильтров?

Answer 1

[bubuq]

Во-первых, ползунок должен быть div.

Во-вторых, добавить стиль от jQuery UI.

В-третьих, придётся адресоваться к элементам SVG по id, так как SVG DOM отличается от HTML DOM и jQuery его в общем, не поддерживает.

А так, вполне будет работать что-то вроде

$( "#slider" ).slider({min:0, max:1000})
$( "#slider" ).on('slidechange', function(e) {
  var v = $('#slid').slider('value')
  $('#cntred').attr('slope', v/100)
})

если разметить SVG объект

<feFuncR id='cntred' type="linear" slope="1.75" intercept="-0.175"/>

Answer 2

[Serge78rus]

Как с помощью jQuery добраться до атрибутов элементов SVG: svgmnemo.ru/pub/svgdyn.html

Comments

[Мари Арти]

интересный материал. немного сложновато (по сравнению с маленьким скриптом выше, например), но зато в ie9 работает. возьму на заметку, спасибо

Answer 3

[Мари Арти]

bubuq, спасибо, Ваш вариант работает отлично. единственное, в FF фильтр просто закрывает картинку и делает ее прозрачной. slope меняется слайдером, но картинки нет.

upd. если картинку в сам svg поместить, то с ff проблема решается.