爲什麼d3中的徑向漸變在svg容器的高度/寬度與高度/寬度不一致時發生變化？

我想了解d3.js中的徑向漸變如何工作。我有一個圓圈，並填充了'defs'標籤中指定的徑向漸變。我將徑向漸變的'r'座標設置爲60％，'cx'和'cy'設置爲零。我的理解是徑向漸變總是從0,0座標開始（恰好在我的圓形元素的中間），並且徑向漸變的外圓將在我的「r」的60％處「停止」。現在，當我只改變我的svg容器的寬度並保持高度不變時，徑向漸變並不相同。看來徑向漸變的外圓被推開了。我不明白爲什麼會發生這種情況。我花了幾個小時在網上搜索，但我找不到足夠的答案。當高度或寬度改變時，是否可以保持徑向漸變的形狀？爲什麼d3中的徑向漸變在svg容器的高度/寬度與高度/寬度不一致時發生變化？

picture 1 here 這幅圖解釋了我實際想要達到的目標。我想用漸變填充弧線。我想我需要使用「userSpaceOnUse」作爲漸變單位，因爲我正在將此徑向漸變填充到各個分段中，如picture 2 here所示。我嘗試使用objectBoundingBox，但是我得到的結果是每個片段都有一個單獨的徑向漸變（每個片段中都有一個圓圈）。當我改變容器的高度/寬度時，徑向漸變的外圓會被推開，所以弧的顏色實際上會失去漸變效果。這就是爲什麼我試圖找到一種在高度/寬度發生變化時保持徑向漸變形狀的方法。

感謝這是我的代碼：

var w = 1000, h = 1000 
r = Math.min(w, h) /4 ; 

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

var radialGradient = d3.select("svg").append("defs") 
    .append("radialGradient") 
    .attr("id", "radial-gradient") 
    .attr("gradientUnits", "userSpaceOnUse") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", "60%") 
    .attr("spreadMethod", "reflect"); 

radialGradient.append("stop") 
    .attr("offset", "15%") 
    .attr("stop-color", "red"); 

radialGradient.append("stop") 
    .attr("offset", "25%") 
    .attr("stop-color", "#fff"); 

radialGradient.append("stop") 
    .attr("offset", "35%") 
    .attr("stop-color", "red"); 

svg.append("circle") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", r) 
    .style("fill", "url(#radial-gradient)");

來源

2016-09-23 alexis

您已設置漸變的中心（CX，CY）0,0容器的原產地，並告訴容器使用空間：userSpaceOnUse。

要糾正此問題，只需更改爲：

.attr("gradientUnits", "objectBoundingBox") // your object limits 
    .attr("cx", "50%") 
    .attr("cy", "50%")        // your object center

希望這有助於

來源

2016-09-23 13:28:32 Klaujesi

非常感謝您的回答@Klaujesi。不幸的是，我真的需要使用userSpaceOnUse作爲漸變單位。我編輯了我的問題，並添加了更多細節和圖片，以更詳細地解釋我的問題。 – alexis

你可以使用1 general gradiente（objectBoundingBox）+ mask – Klaujesi

來實現這個功能謝謝你的回答。你能舉個例子嗎？或者，也許一些鏈接，所以我可以閱讀更多關於這種技術？非常感謝你。 – alexis

爲什麼d3中的徑向漸變在svg容器的高度/寬度與高度/寬度不一致時發生變化？

回答

相關問題