D3使用图案用图像填充形状

D3 fill shape with image using pattern

本文关键字：填充 图像 D3      更新时间：2023-09-26

我正试图用D3.js创建一个圆形化身，但我无法将我的图像显示在我的圆圈中。我正在使用svg模式def来尝试用图像填充圆圈。

下面有人能告诉我我做错了什么吗？非常感谢。

var config = {
    "avatar_size" : 48
}
var body = d3.select("body");
var svg = body.append("svg")
        .attr("width", 500)
        .attr("height", 500);
var defs = svg.append('svg:defs');
defs.append("svg:pattern")
    .attr("id", "grump_avatar")
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("patternUnits", "userSpaceOnUse")
    .append("svg:image")
    .attr("xlink:href", 'images/avatars/avatar_grumpy.png')
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("x", 0)
    .attr("y", 0);
var circle = svg.append("circle")
        .attr("cx", config.avatar_size)
        .attr("cy", config.avatar_size)
        .attr("r", config.avatar_size)
        .style("fill", "#fff")
        .style("fill", "#grump_avatar");

"填充"；是样式属性，则必须使用CSS url()表示法来引用模式元素。

一旦你解决了这个问题，你会发现你的尺寸也有问题——除非你的意图是在圆圈里平铺四个化身副本！

附言：我通常会把它作为一个评论，并把它标记为一个简单的打字错误来结束，但我想试试Stack Snippets：

var config = {
    "avatar_size" : 48
}
var body = d3.select("body");
var svg = body.append("svg")
        .attr("width", 500)
        .attr("height", 500);
var defs = svg.append('svg:defs');
defs.append("svg:pattern")
    .attr("id", "grump_avatar")
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("patternUnits", "userSpaceOnUse")
    .append("svg:image")
    .attr("xlink:href", 'http://placekitten.com/g/48/48')
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("x", 0)
    .attr("y", 0);
var circle = svg.append("circle")
        .attr("cx", config.avatar_size/2)
        .attr("cy", config.avatar_size/2)
        .attr("r", config.avatar_size/2)
        .style("fill", "#fff")
        .style("fill", "url(#grump_avatar)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

相关文章：