我一直在努力解决以下问题。
我有一个元素，我想用一张图片填充它。 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;
你的 海基
最佳答案
可以找到此解决方案的基础 here .我真的很想将它合并到我正在使用的网站中，但我不想使用非标准版本的 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>
关于javascript - 拉斐尔，用图像填充背景 (fillfit)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17162132/