1

我一直在努力解决以下问题。

我有一个元素，我想用一张图片填充它。Raphael 在其默认设置下使用模式，因此重复图像。

我找到了http://xn--dahlstrm-t4a.net/svg/raphaeljs/fill-shape-with-image.html，它应该可以完成任务，但同样的问题仍然存在。

知道如何调整代码，使您可以将一个图像从左上角设置到右下角吗？

重复背景

    case "fillfit":
        var isURL = Str(value).match(R._ISURL);
        if (isURL) {
            el = $("pattern");
            var ig = $("image");
            console.log('R', R);
            el.id = R.createUUID();
            $(el, {x: 0, y: 0, height: 1, width: 1, "patternContentUnits": "objectBoundingBox"});
            $(ig, {x: 0, y: 0, width: 1, height: 1, "preserveAspectRatio": "none", "xlink:href": isURL[1]});

            el.appendChild(ig);
            o.paper.defs.appendChild(el);
            $(node, {fill: "url(#" + el.id + ")"});
            o.pattern = el;
            o.pattern && updatePosition(o);
        }
        break;

你的海基

4

1 回答 1

2

可以在此处找到此解决方案的基础。我真的很想将它整合到我正在开发的网站中，但我不想使用非标准版本的 Raphael，而且交叉手指并希望研究 Raphael 的人会采用Dahlström提出的解决方案。

这个例子是完全独立的。

    <html>
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
        <script>
            $(function() {
                var paper = Raphael(document.getElementById("paper"), 100, 100);
                var circle = paper.circle(50, 50, 50);
                var uuid = Raphael.createUUID();
                var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
                var backgroundImage = paper.image("https://si0.twimg.com/profile_images/916160956/thumbnail_10502_bigger.jpg", 0, 0, 1, 1);
                pattern.setAttribute("id", uuid);
                pattern.setAttribute("x", 0);
                pattern.setAttribute("y", 0);
                pattern.setAttribute("height", 1);
                pattern.setAttribute("width", 1);
                pattern.setAttribute("patternContentUnits", "objectBoundingBox");

                $(backgroundImage.node).appendTo(pattern);

                $(pattern).appendTo(paper.defs);
                $(circle.node).attr("fill", "url(#" + pattern.id + ")");
            });
        </script>
    </head>
    <body>
        <div id="paper"></div>
    </body>
</html>
于 2013-08-19T18:49:19.117 回答