Question

我想创建一个圆形裁切图像以与svg圆配合使用，并决定用图案填充svg圆。我让它适用于单个案例：

defs.append("svg:pattern")
    .attr("id", "story1")
    .attr("width", 200)
    .attr("height", 100)
    .attr("patternUnits", "userSpaceOnUse")
    .append("svg:image")
    .attr("xlink:href", 'ml-image4.png')
    .attr("width", 200)
    .attr("height", 100)
    .attr('x',0)
    .attr('y',0);

var circle1 = svg.append("circle")
        .attr("cx", 100)
        .attr("cy", 50)
        .attr("r", 40)
        .style("fill", "#fff")
        .style("fill", "url(#story1)")
        .style('stroke','#000')
        .style('stroke-width', 5);

然后，我得到了所有的支持，并尝试适应程序实现，但是效果并不理想。我希望有一种方法可以这样做，因为我的最终目标是拥有一个使用许多图片作为图案的应用程序。这就像一个小画廊，其中每个{svg圆圈}使用.attr('x', function(d,i) { return 100+i*200})在页面上隔开，每个圆圈引用不同的模式。模式ID是数据成员，因此我尝试这样做：.style('fill',function(d) {return "url(#"+d.id+")"; })。我不确定为什么它不起作用。在我看来，它似乎功能正常。我确实收到了错误：

未捕获的DOMException：无法在上执行'querySelectorAll' 'Element'：'svg：pattern'不是有效的选择器。

这是我对程序化def模式的适应，并快速查看了我的数据：

var data = [
    {'id':'story1', 'Title':'Title1', 'Date':'03/10/2017','Icon':'Icon1.png', 'Link':'www.link1.com/'},
    {'id':'story2', 'Title':'Title2', 'Date':'12/15/2017','Icon':'Icon2.png', 'Link':'www.link2.com/'}
];

var defs = svg.append('svg:defs');

defs.selectAll(null)
    .data(data)
    .enter()
    .append('svg:pattern')
    .attr('id',function(d) {return d.id; })
    .attr('width', 200)
    .attr('height', 100)
    .attr('patternUnits', 'userSpaceOnUse')
    .append('svg:image')
    .attr('xlink:href', function(d) {return d.Icon})
    .attr('width', 200)
    .attr('height', 100)
    .attr('x',0)
    .attr('y',0);

svg.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx', function(d,i) {return 100+i*200})
    .attr('cy', 50)
    .attr('r',40)
    .style('fill',function(d) {return "url(#"+d.id+")"; })
    .style('stroke','#000')
    .style('stroke-width',3);

问题

从错误的角度来看，我的修改似乎有缺陷。我该如何调整以获得SVG圈子的编程模式？以我的拙见，我的方法与帖子开头的简单案例（1个模式1个圆圈）并没有什么不同，我试图做的就是扩大规模，以便可以使用d3.selectAll()使用我的数据。

SVG形状的D3程序化defs模式填充

问题

0 个答案: