Ich würde gerne wissen, welche techniken ich verwenden sollte, um svg-filter auf raphael-pfade anzuwenden?
Ich weiß, dass Raphael versucht, so viel Cross-Browser mit IE es sein kann, aber ich war wundernd, wenn es eine Möglichkeit, die Filter mit Javascript hinzufügen war.
Dazu habe ich eine Bibliothek erstellt. Sie können etwas tun wie:
var paper = Raphael("test");
var circle = paper.circle(100, 100, 50, 50).attr({fill: "red", stroke: "black"});
circle.emboss();Schauen Sie sich eine Fiedel an: http://jsfiddle.net/chrismichaelscott/5vYwJ/
oder die Projektseite: http://chrismichaelscott.github.io/fraphael
Es ist durchaus möglich, Raphaël um folgende Punkte zu erweitern svg-Filter , für Unschärfe Blick auf raphael.blur.js . Dies kann als Ausgangspunkt für das Hinzufügen anderer Filtereffekte dienen. Weitere Informationen zu Filtern (zusammen mit Beispielen) finden Sie in der SVG-Fibel .
Eine etwas umständliche Möglichkeit, SVG-Filter mit Raphael-Objekten zu verwenden, ist die folgende Technik. Sie erzeugt ein Raphael-Rechteck und fügt die Filterdefinition in dasselbe SVG-Dokument ein. Dies funktioniert natürlich nicht mit älteren Browsern, die keine Unterstützung für Inline-SVG bieten. Dies ist jedoch kein großes Problem, da ältere Browser ebenfalls keine SVG-Filterunterstützung bieten.
Obwohl dies nicht jQuery getaggt Frage, für die Einfachheit der Code verwendet jQuery für DOM-Manipulationen. Das Namespace-Problem wird durch die Verwendung von Dummy-SVG-Elementen gelöst, was den Vorteil hat, dass SVG-Elemente mit Hilfe von Text-Strings (anstelle von DOM-Methoden) erstellt werden können. Lasst den Browser tun, was er kann!
Das Arbeitsbeispiel ist 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> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
