我想知道，如何使用哪些技术将SVG过滤器应用于Raphael路径？
我知道Raphael尽可能地与IE浏览器兼容，但我想知道是否有一种使用JavaScript添加过滤器的方法。
我知道Raphael尽可能地与IE浏览器兼容，但我想知道是否有一种使用JavaScript添加过滤器的方法。
3个回答
7
我建立了一个库来完成这个任务。你可以像这样做：
请看这个示例： http://jsfiddle.net/chrismichaelscott/5vYwJ/ 或者访问项目页面：http://chrismichaelscott.github.io/fraphael
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
- chrismichaelscott
4
可以通过扩展Raphaël来添加SVG滤镜，要模糊效果，请查看raphael.blur.js。这可以作为添加其他滤镜效果的起点。有关滤镜的更多信息（以及示例），请参见SVG Primer。
- Erik Dahlström
3
一种使用SVG过滤器与Raphael对象的hacky方法是以下技术。它创建Raphael矩形并将过滤器定义添加到同一SVG文档中。当然，这在缺乏对内联SVG支持的旧浏览器中无法工作。但这不是一个大问题，因为旧浏览器也没有SVG过滤器支持。
虽然这不是jQuery标记的问题，但为了简单起见，代码使用jQuery进行DOM操作。命名空间问题使用虚拟SVG元素解决，这样做的好处是可以使用文本字符串创建SVG元素（而不是DOM方法）。让浏览器做它能做的事情！
工作示例在http://jsbin.com/ilinan/1中。
虽然这不是jQuery标记的问题，但为了简单起见，代码使用jQuery进行DOM操作。命名空间问题使用虚拟SVG元素解决，这样做的好处是可以使用文本字符串创建SVG元素（而不是DOM方法）。让浏览器做它能做的事情！
工作示例在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>
- Timo Kähkönen
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接