How to use svg filters with raphael js?

前端未结

关注

 3  1976

清歌不尽

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

相关标签:

3条回答

伪装坚强ぢ

2021-01-13 10:22

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>

0 讨论(0)

执笔经年

2021-01-13 10:23
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
0 讨论(0)
发布评论:

提交评论
- 加载中...
执念已碎

2021-01-13 10:33

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...