Transparency effect with JQuery.SVG

Question

I've draw a svg path using the great Jquery.SVG (the documentation could be better)

Everything works fine. But I am trying to do something fancier.

There is a colored rectangle and I'd like to highlight it using specularLighting.

I was thinking some code like this:

$('#path-svg-id','#divid').filters.specularLighting(filter, 'specOut', 'blur', 5, 0.75, 20, {lightingColor: '#bbbbbb'});

But it does not work. Any ideas?

Answer 1

I've used the following and it worked really well

svg.ellipse(w, h,  w, h, {stroke: 'red', fill:'transparent'});

Answer 2

You need to add the feSpecularLighting element as a child of a filter element, and the feSpecularLighting element should have a light source element child.

Then you can apply the filter to an element of your choice via the CSS filter property.

See this example of feSpecularLighting applied to some svg content.