如何在每个部分绘制圆角和不同渐变和阴影的圆环图？

Question

我必须使用示例数据类别 = [30,32,58,62] 在我的网站上绘制像 that 这样的圆环图。

如您所见，每个部分都有径向渐变。我已经尝试为此使用 d3 库，但我只能获得从图形中心开始的渐变，而不是从每个部分的中心开始。

每个部分内还有一个盒子阴影。我该怎么做？

该图应用的样式如下：

不同部分之间的距离为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。添加其他圈子及其部门

<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 过滤器：

使用了来自answer 的技巧。谢谢@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>