Как использовать фильтры SVG с Raphael JS? - PullRequest
Новая
       7

Как использовать фильтры SVG с Raphael JS?

5 голосов
/ 26 июня 2011

Я хотел бы знать, какие методы я должен использовать для применения фильтров SVG к путям Рафаэля?

Я знаю, что Raphael пытается быть настолько же кроссбраузерным, насколько это возможно в IE, но мне было интересно, есть ли способ добавить фильтры, используя javascript.

Ответы [ 3 ]

7 голосов
/ 24 июля 2013

Я построил библиотеку, чтобы сделать это. Вы можете сделать что-то вроде: 

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

4 голосов
/ 27 июня 2011

Возможно расширить Raphaël, добавив svg-фильтры , для размытия смотрите raphael.blur.js . Это может послужить отправной точкой для добавления других эффектов фильтра. Для получения дополнительной информации о фильтрах (вместе с примерами) см. SVG Primer .

3 голосов
/ 04 декабря 2012

Один хакерский способ использовать фильтры SVG с объектами Рафаэля - следующая техника. Он создает прямоугольник Рафаэля и добавляет определение фильтра к тому же документу SVG. Это, конечно, не работает со старыми браузерами, в которых отсутствует поддержка встроенного SVG. Но это не большая проблема, потому что старые браузеры также не поддерживают SVG-фильтр.

Хотя это не вопрос с тегами jQuery, для простоты в коде для манипуляций с DOM используется jQuery. Проблема пространства имен решается с использованием фиктивного элемента 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>
...