如何设置 SVG 路径的样式以拍摄图像？

Question

我只是想把 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 中，您附上了错误的图片。如果除此之外你保持你的代码相同，它应该可以工作。祝你好运。

Answer 2

如果我没理解错的话，你的意思是如果你想调整整个东西的大小，那么图像会随之改变。正确的？您可以通过使所有数字成为其他数字的函数来做到这一点。

我从定义开始

innerR = 100

因为没有更好的名字。那么所有其他非零函数都是它的函数。有一个fiddlehere。试验该参数，看看会发生什么。

如何设置 SVG 路径的样式以拍摄图像？

How to style SVG path to take an image?

html

javascript

jquery

svg

d3.js