How to use svg filters with raphael js?

i would like to know, which techniques should i use to apply svg filters to raphael paths?

I know that raphael tries to be as much cross browser with IE it can, but i was wondering if there was a way to add the filters using javascript.

回答1:

I built a library to do this. You can do something like:

var paper = Raphael("test");
var circle = paper.circle(100, 100, 50, 50).attr({fill: "red", stroke: "black"});

circle.emboss();

Have a look at a fiddle: http://jsfiddle.net/chrismichaelscott/5vYwJ/

or the project page: http://chrismichaelscott.github.io/fraphael

回答2:

It's quite possible to extend Raphaël to add svg filters, for blur look at raphael.blur.js. That can serve as a starting point for adding other filter effects. For a bit more info on filters (along with examples) see the SVG Primer.

回答3:

One hacky way to use SVG filters with Raphael objects is the following technique. It creates Raphael rectangle and adds filter definition to the same SVG document. This of course doesn't work with older browsers which lack support for inline SVG. But this is not a big problem, because older browsers have also no SVG filter support.

Although this is not jQuery tagged question, for simplicity the code uses jQuery for DOM manipulations. The namespace problem is solutioned using dummy SVG element, which has the advantage that SVG elements can be created using text strings (instead of DOM methods). Let the browser do what browser can!

The working example is in http://jsbin.com/ilinan/1.

<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var p = Raphael("cont", 300, 200);
    $(p.canvas).attr("id", "p");
    var rect = p.rect(10, 10, 100, 100);
    $(rect.node).attr("id", "rect");
    $("#rect").attr("filter", "url(#innerbewel)");
    $("#rect").attr("fill", "red");

    var f = "<filter id='innerbewel' x0='-50%' y0='-50%' width='200%' height='200%'>\
  <feGaussianBlur in='SourceAlpha' stdDeviation='2' result='blur'/>\
  <feOffset dy='3' dx='3'/>\
  <feComposite in2='SourceAlpha' operator='arithmetic'\
             k2='-1' k3='1' result='hlDiff'/>\
  <feFlood flood-color='white' flood-opacity='0.8'/>\
  <feComposite in2='hlDiff' operator='in'/>\
  <feComposite in2='SourceGraphic' operator='over' result='withGlow'/>\
\
  <feOffset in='blur' dy='-3' dx='-3'/>\
  <feComposite in2='SourceAlpha' operator='arithmetic'\
            k2='-1' k3='1' result='shadowDiff'/>\
  <feFlood flood-color='black' flood-opacity='0.8'/>\
  <feComposite in2='shadowDiff' operator='in'/>\
  <feComposite in2='withGlow' operator='over'/>\
</filter>";

    // Create dummy svg with filter definition 
    $("body").append('<svg id="dummy" style="display:none"><defs>' + f + '</defs></svg>');
    // Append filter definition to Raphael created svg
    $("#p defs").append($("#dummy filter"));
    // Remove dummy
    $("#dummy").remove();
    $("#rect").attr("fill", "orange");
});

</script>
</head>
<body>
  <div id="cont"></div>
</body>