javascript - 如何设置 SVG 路径的样式来拍摄图像？

Question

Here is my JSFiddle.

我只是想设置 this image在我的弧线中间。我最好的直觉告诉我使用 .attr("fill","url('somePicture')")，但对我来说这并不是一个可行的解决方案。

var width = 700,
    height = 600,
    tau = 2 * Math.PI

var arc = d3.svg.arc()
            .innerRadius(100)
            .outerRadius(250)
            .startAngle(0)

var arc2 = d3.svg.arc()
            .innerRadius(0)
            .outerRadius(100)
            .startAngle(0)

var svg = d3.select("body")
            .append("svg")
            .attr("width",width)
            .attr("height",height)
            .append("g")
            .attr("transform", "translate(" + width/2 + "," + height/2 + ")")

//gray null background
var background = svg.append("path")
                    .datum({endAngle: tau})
                    .style("fill", "#ddd")
                    .attr("d", arc)

var center =     svg.append("image")
                    .append("path")
                    .datum({endAngle: tau})
                    .attr("d", arc2)
                    .attr("class","record")
                    .attr("xlink:href", "http://lorempixel.com/g/400/400/")

Answer 1

您不需要定义路径。如果你查看你的 html，图像就在那里，但它的大小为 0x0。

var center =     svg.append("image")
                .datum({endAngle: tau})
                .attr("d", arc2)
                .attr("class","record")
                .attr("width",400)
                .attr("height",400)
                .attr("x",-200)
                .attr("y",-200)
                .attr("xlink:href", "http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/glossy-black-icons-symbols-shapes/018712-glossy-black-icon-symbols-shapes-shapes-circle.png")

在你的 fiddle 中你附加了错误的图像。除此之外，如果您保持代码相同，它应该可以工作。祝你好运。