Question

我想知道，我应该使用哪些技术将svg过滤器应用于raphael路径？

我知道raphael会尽可能多地使用IE浏览器，但我想知道是否有办法使用javascript添加过滤器。

Answer 1

我建立了一个库来做这件事。你可以这样做：

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

circle.emboss();

看看小提琴：http://jsfiddle.net/chrismichaelscott/5vYwJ/

或项目页面：http://chrismichaelscott.github.io/fraphael

Answer 2

很有可能扩展Raphaël以添加svg filters，模糊看raphael.blur.js。这可以作为添加其他滤镜效果的起点。有关过滤器的更多信息（以及示例），请参阅SVG Primer。

Answer 3

对Raphael对象使用SVG过滤器的一种hacky方法是以下技术。它创建Raphael矩形并将过滤器定义添加到同一SVG文档中。这当然不适用于缺乏对内联SVG支持的旧浏览器。但这不是一个大问题，因为旧浏览器也没有SVG过滤器支持。

虽然这不是jQuery标记的问题，但为了简单起见，代码使用jQuery进行DOM操作。使用伪SVG元素解决了名称空间问题，其优点是可以使用文本字符串（而不是DOM方法）创建SVG元素。让浏览器做什么浏览器就可以了！

工作示例位于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>

如何使用raphael js的svg过滤器？

3 个答案: