如何在每個部分繪制圓角和不同漸變和陰影的圓環圖？

Question

我必須使用示例數據類別 = [30,32,58,62] 在我的網站上繪制類似的圓環圖。

如您所見，每個部分都有徑向漸變。 我已經嘗試為此使用 d3 庫，但我只能得到從我的圖形中心開始的漸變，而不是從每個部分的中心開始。

每個部分內還有一個盒子陰影。 我怎樣才能做到這一點？

應用styles圖如下：

不同部分之間的距離為1%

邊框半徑：6px；

CSS

 background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(255, 184, 0, 0.56) 81.25%, rgba(255, 239, 153, 0.32) 100%); box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(255, 176, 57, 0.9); background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(191, 191, 191, 0.345) 82.81%, rgba(228, 228, 228, 0.1) 92.19%); box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(131, 131, 131, 0.6); background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(166, 166, 166, 0.1725) 82.81%, rgba(203, 203, 203, 0.05) 92.19%); box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(105, 105, 105, 0.2); background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(255, 184, 0, 0.24) 81.25%, rgba(255, 239, 153, 0.12) 100%); box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(255, 176, 57, 0.4);

Answer 1

為了讓每個段獨立地接受自己的梯度，以后可以用作單獨的參考，我們將使用四個圓圈而不是一個圓圈，因為圖中有 4 個扇區。

在每個圓圈上，只會顯示一個扇區，並且通過間隙，可以看到具有自己扇區的第二個圓圈，依此類推。

#1。 具有一個扇區的圓的示例：

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" style="border:1px solid" > <circle id="s2" transform="rotate(-120 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FAE094" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" /> <polyline points="200,0 200,400" fill="none" stroke="black" /> <polyline points="0,200 400,200" fill="none" stroke="black" /> </svg>

#2。 添加圓圈的 rest 及其扇區

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" style="border:1px solid" > <circle id="s1" transform="rotate(-120 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FAE094" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" /> <circle id="s2" transform="rotate(-58 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FCF0D0" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" /> <circle id="s3" transform="rotate(5 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="335, 670" /> <circle id="s4" transform="rotate(137 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="296, 695" /> <polyline points="200,0 200,400" fill="none" stroke="black" /> <polyline points="0,200 400,200" fill="none" stroke="black" /> </svg>

#3。 制作扇區的圓角

為此，我們使用 SVG 過濾器：

從答案中使用了一個技巧。 謝謝@Temani Afif

<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" 
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>

 <style> circle{ filter:url(#goo); } </style> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" style="border:1px solid" > <defs> <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> <circle id="s1" transform="rotate(-120 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FAE094" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" /> <circle id="s2" transform="rotate(-58 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FCF0D0" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" /> <circle id="s3" transform="rotate(5 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="335, 670" /> <circle id="s4" transform="rotate(137 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="296, 695" /> </svg>

#4。 添加徑向漸變
每個扇區都有自己的梯度：

 circle{ filter:url(#goo); } #s1 { stroke:url(#rg1); } #s2 { stroke:url(#rg2); } #s3 { stroke:url(#rg3); } #s4 { stroke:url(#rg4); }

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" > <defs> <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> <radialGradient id="rg1" r="1" fx="0.6" fy="0.5"> <stop offset="40%" stop-color="#F6BD4A"></stop> <stop offset="50%" stop-color="#F6DFB2"></stop> <stop offset="70%" stop-color="white"></stop> <stop offset="90%" stop-color="#F6AC17"></stop> </radialGradient> <radialGradient id="rg2" r="1" fx="0.4" fy="0.5"> <stop offset="40%" stop-color="#F6BD4A"></stop> <stop offset="50%" stop-color="#F6DFB2"></stop> <stop offset="70%" stop-color="white"></stop> <stop offset="90%" stop-color="#F6AC17"></stop> </radialGradient> <radialGradient id="rg3" r="1" fx="0.5" fy="0.5"> <stop offset="40%" stop-color="#DCDCDC"></stop> <stop offset="50%" stop-color="#FFFFFF"></stop> <stop offset="60%" stop-color="#CDCDCD"></stop> <stop offset="90%" stop-color="#CDCDCD"></stop> </radialGradient> <radialGradient id="rg4" r="1" fx="0.5" fy="0.5"> <stop offset="40%" stop-color="#DCDCDC"></stop> <stop offset="50%" stop-color="#F3F3F3"></stop> <stop offset="60%" stop-color="#B8B8B8"></stop> <stop offset="90%" stop-color="#B8B8B8"></stop> </radialGradient> </defs> <circle id="s1" transform="rotate(-120 200 200)" cx="200" cy="200" r="160" fill="none" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" /> <circle id="s2" transform="rotate(-58 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#FCF0D0" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" /> <circle id="s3" transform="rotate(5 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="335, 670" /> <circle id="s4" transform="rotate(137 200 200)" cx="200" cy="200" r="160" fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="296, 695" /> </svg>