如何在 D3 JavaScript 中將影像嵌入圓形物件內？
在 D3 JavaScript 中，在現有圓形物件內添加圖像需要比簡單地使用「填充」或「顏色」屬性更細緻的方法。應用影像時，「append('image')」方法無法如預期般運作。
解決方案：利用模式
要解決此問題，Lars指出需要建立模式。以下連結在 d3 Google 群組論壇上提供了有關此問題的深入討論：[D3 Google 群組討論](https://groups.google.com/g/d3-js/c/TPkAqJjjlks)。
實作
以下程式碼片段在SVG 中設定模式元素：
<svg>
在D3 腳本中，「填充」屬性調整如下：
svg.append("circle")
.attr("class", "logo")
.attr("cx", 225)
.attr("cy", 225)
.attr("r", 20)
.style("fill", "transparent")
.style("stroke", "black")
.style("stroke-width", 0.25)
.on("mouseover", function(){
d3.select(this)
.style("fill", "url(#image)");
})
.on("mouseout", function(){
d3.select(this)
.style("fill", "transparent");
});這樣，滑鼠懸停時，圓圈就會被影像填滿。
以上是如何用圖片填滿 D3.js 圓圈？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
