Question

我只是想在我的弧线中间设置this image。我最好的直觉告诉我们使用.attr（“填充”，“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")

在你的小提琴中你附上了错误的图像。如果你保持你的代码相同，它应该工作。祝你好运。

Answer 2

如果我理解正确，你的意思是，如果你想调整整个事物的大小，那么图像会随之改变。正确？你可以通过使其他人的所有数字功能来做到这一点。

我从定义

开始

innerR = 100

缺乏更好的名字。然后所有其他非零函数都是其功能。有一个小提琴here。试验该参数，看看会发生什么。

如何设置SVG路径来拍摄图像？

2 个答案: