如何向 Raphael.js 对象添加内部阴影？答案

【问题标题】：How can I add inner shadow to Raphael.js object?如何向 Raphael.js 对象添加内部阴影？
【发布时间】：2013-01-04 01:42:48
【问题描述】：

我发现了一些基于模糊或发光的阴影插件，还有描边不透明度，但这只是模拟，不能用于内阴影。

SVG 规范中也没有简单的过滤器，所以你不能简单地利用它。

【问题讨论】：

这只是在宣传您的插件吗？请改写问题和答案以匹配网站的格式（例如，详细说明您解决问题的尝试）。
@EliranMalka 你说的广告是什么意思？那么每个带有您自己代码的答案都在宣传您的代码？我宁愿说我想与 SO 用户分享我的解决方案，就像他们分享他们的解决方案一样。这就是 SO 如此有用的原因！

标签： javascript jquery svg raphael

【解决方案1】：

我根据这两个链接编写了自己的插件：

https://github.com/dahoo/raphael.dropshadow.js

http://svgquickref.com/properties/filter/inner-shadow/index.html

HTML 代码（用法）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Raphael Test</title>

        <script type="text/javascript" src="js/libs/jquery.js"></script>
        <script type="text/javascript" src="js/libs/raphael.js"></script>
        <script type="text/javascript" src="js/libs/raphael.innershadow.js"></script>
    </head>
    <body>
        <div id="raphael"></div>
        <script type="text/javascript">
            $(document).ready(function() {
                var raphael, path, pattern;
                raphael = Raphael(document.getElementById('raphael'), 500, 500);
                path = raphael.circle(200, 200, 180);
                path.attr('fill', 'red');
                path.innerShadow(50, 0, 0, "green", 0.5);
            });
        </script>
    </body>
</html>

插件代码：

(function() {
    if(Raphael.vml) {
        Raphael.el.innerShadow = function (size, offsetX, offsetY, color, opacity, filter_id, input) {
            // not supporting VML yet
            return this; // maintain chainability
        }
    } else {
        var $ = function(el, attr) {
            if(attr) {
                for(var key in attr)
                if(attr.hasOwnProperty(key)) {
                    el.setAttribute(key, attr[key]);
                }
            } else {
                return document.createElementNS("http://www.w3.org/2000/svg", el);
            }
        };
        Raphael.el.innerShadow = function(size, offsetX, offsetY, color, opacity, filter_id, input) {

            opacity = opacity || 1;
            filter_id = filter_id || "innershadow";
            input = input || "SourceGraphic";

            if(size != "none") {
                var fltr = $("filter"),
                    offset = $("feOffset"), // offset
                    blur = $("feGaussianBlur"), // shadow bluer
                    composite1 = $("feComposite"), // invert drop shadow to create inner shadow
                    flood = $("feFlood"), // color & opacity
                    composite2 = $("feComposite"), // clip color inside shadow
                    composite3 = $("feComposite") // put shadow over original object

                fltr.id = filter_id;

                $(fltr, {
                        "height" : "150%",
                        "width" : "150%"
                });

                $(offset, {
                    dx: offsetX,
                    dy: offsetY
                });

                $(blur, {
                    stdDeviation: +size,
                    result: "offset-blur"
                });

                $(composite1, {
                    operator: "out",
                    "in": "SourceGraphic",
                    in2: "offset-blur",
                    result: "inverse"
                });

                $(flood, {
                    "flood-color": color,
                    "flood-opacity": opacity,
                    result: "color"
                });

                $(composite2, {
                    operator: "in",
                    "in": "color",
                    in2: "inverse",
                    result: "shadow"
                });

                $(composite3, {
                    operator: "over",
                    "in": "shadow",
                    in2: input
                });

                fltr.appendChild(offset);
                fltr.appendChild(blur);
                fltr.appendChild(composite1);
                fltr.appendChild(flood);
                fltr.appendChild(composite2);
                fltr.appendChild(composite3);

                this.paper.defs.appendChild(fltr);
                this._blur = fltr;

                $(this.node, {
                    "filter" : "url(#" + filter_id + ")"
                });

            } else {
                if(this._blur) {
                    this._blur.parentNode.removeChild(this._blur);
                    delete this._blur;
                }
                this.node.removeAttribute("filter");
            }
            return this;  // maintain chainability
        };
    }

    Raphael.st.innerShadow = function(size, offsetX, offsetY, color, opacity, filter_id, input) {
        return this.forEach(function(el) {
            el.innerShadow(size, offsetX, offsetY, color, opacity, filter_id, input);
        });
    };
})();

【讨论】：

这只是在宣传您的插件吗？请改写问题和答案以匹配网站的格式（例如版权标题是多余的）。
谢谢，我指的是整个标题块（这样的内容是多余的，因为它对所描述的问题没有贡献）。