带圆角的甜甜圈图 - 这可能吗？ [关闭]

Question

我需要将其实现为圆环图——我四处寻找 css/svg/canvas 解决方案，但找不到任何可靠的方法。

我知道我可以在每个部分都有完全圆角，但这不是我想要的。

Answer 1

我会用这个答案结合这个

.palette {
  --g:20px; /* The gap between shapes*/
  --s:50px; /* the size*/

  height: 300px;
  width: 300px;
  position:relative;
  display:inline-block;
  overflow:hidden;
  filter: url('#goo');
}
.palette > * {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:var(--s) solid var(--c,red);
  border-radius:50%;
  clip-path:polygon(
    calc(50% + var(--g)/2) 50%, 
    calc(50% + var(--g)/2) 0%, 
    100% 0%,
    100% calc(33.745% - var(--g)/2),
    50% calc(50% - var(--g)/2)); 
}
.color1 {
  transform:rotate(72deg);
  --c:blue;
}
.color2 {
  transform:rotate(144deg);
  --c:orange;
}
.color3 {
  transform:rotate(-72deg);
  --c:green;
}
.color4 {
  transform:rotate(-144deg);
  --c:purple;
}

<div class="palette">
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="color3"></div>
  <div class="color4"></div>
  <div class="color5"></div>
</div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" 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>
</svg>

Answer 2

该过滤器也可以应用于 SVG 描边路径：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 20 60 60">
<defs>
      <filter id="round">
          <feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="round1" />    
          <feColorMatrix in="round1" mode="matrix" 
             values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -14" result="round2"/>
          <feComposite in="SourceGraphic" in2="round2" operator="atop"/>
      </filter>
  </defs>
<style>
    path{
        fill:none;
        stroke-width:9;
     }
</style>
  <path stroke-dasharray="70 230" stroke-dashoffset="94" value="70" stroke="blue"
    filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
  ></path>
  <path stroke-dasharray="55 245" stroke-dashoffset="173" value="55" stroke="gold"
    filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
  ></path>
  <path stroke-dasharray="45 255" stroke-dashoffset="242" value="45" stroke="purple"
    filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
  ></path>
  <path stroke-dasharray="30 270" stroke-dashoffset="296" value="30" stroke="red"
    filter="url(#round)" pathLength="300"  d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
  ></path>
</svg>

<style> svg{ width:180px; background:lightgreen } </style>