如何樣式化SVG路徑以拍攝圖像？

我只是試圖在弧的中間設置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/")

來源

2015-04-07 Pilkington

您不需要定義路徑。如果你看看你的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")

在你的小提琴中，你附上了錯誤的圖像。如果你保持你的代碼不變，它應該工作。祝你好運。

來源

2015-04-07 05:42:35

好的謝謝，這確實很好。我唯一的問題是讓圖像恰好適合弧線間隙的大小。有沒有辦法做到這一點沒有硬編碼的大小/位置？ – Pilkington

如果我正確理解你的意思，那麼你的意思是如果你想調整整個事物的大小，那麼圖像將隨之改變。正確？你可以通過使其他人的所有數字功能來做到這一點。

我開始與定義

innerR = 100

缺乏一個更好的名字。然後所有其他非零功能都是這個功能。有一個小提琴here。試驗這個參數，看看會發生什麼。

來源

2015-04-07 22:48:22

我建議您將此作爲一種常規使用。也就是說，當參數互相依賴時，可以這樣定義它們。它們並不總是顯而易見的，但是在這裏例如所有的半徑都可能取決於彼此，否則，改變一個數字會混淆比率。 –

如何樣式化SVG路徑以拍攝圖像？

回答

相關問題