Question

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

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

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

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

repeating background

    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;

此致海基

Answer 1

可以找到此解决方案的基础here。我真的很想把它整合到我正在研究的网站中，但是我不想使用非标准版本的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>

拉斐尔，填充图像背景（fillfit）

1 个答案: