重叠的圈出血 [英] Overlapping circles bleeding

问题描述

我有一个位置：相对绿色环与位置：绝对红色克隆 ：之前和位置：绝对白克隆：之后

这两个浏览器测试（Chrome和Firefox）在那里我仍然可以看到绿色/红色的戒指在白色面具下面。让带有 overflow：hidden 的绿色环部分修复了删除外部出血的问题;

为什么会发生，我如何隐藏下面的圈子？

Codepen

  body {background：lavender;}＃ring {position：relative; width：100px; height：100px; border-radius：50％; border：50px solid green;}＃ring：before {content：''; position：absolute; top：-50px; left：-50px; width：100px; height：100px; border：50px solid red; border-radius：50％;}＃ring：after {content：''; position：absolute; top：-50px; left：-50px; width：100px; height：100px; border-radius：50％; border：50px solid white;}  

 < div id = ring>< / div>  

/ strong>以下是完整（非最小）场景的链接： Codepen strong> 只能在更新的Google Chrome浏览器上使用;

解决方案

，则可以使用此处介绍的方法：循环百分比进度条。使用内嵌svg 并动画处理 stroke-dasharray 属性。

适应您的使用case，它可以看起来像这样：

  body {background：lavender;} svg {width：200px; height：200px;}  

 < svg viewbox = -  2.5 -2.5 105 105> < circle cx =50cy =50r =40fill =transparentstroke-width =25stroke =＃fff/> < path fill =nonestroke-width =25stroke =tomatostroke-dasharray =251.2,0d =M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0  - 80> < animate attributeName =stroke-dasharrayfrom =0,251.2to =251.2,0dur =5s/> < / path>< / svg>  

请注意，在此示例中，动画是通过 SMIL 完成的。

---

上一个答案：

如果您的目的是移除流血，一个解决方案是通过使伪元素边框更宽来隐藏它。

根据您的实际使用

以下是一个示例：

  body {background：lavender} #ring {position：relative; width：100px; height：100px; border-radius：50％; border：50px solid green;}＃ring：before {content：''; position：absolute; top：-51px; left：-51px; width：98px; height：98px; border：52px solid red; border-radius：50％;}＃ring：after {content：''; position：absolute; top：-52px; left：-52px; width：96px; height：96px; border-radius：50％; border：54px solid white;}  

 < div id = ring>< / div>  

I have a position:relative green ring with a position:absolute red clone :before and a position:absolute white clone :after it covering both (since they are on the same place and have the same size).

The problem is: it renders bad on both browsers tested (Chrome and Firefox) where I still can see the green/red rings under the white mask. Let the green ring with overflow:hidden partially fixes the problem removing the outer bleed; but the inner bleeding border stills there.

Why does it happens and how can I totaly hide the lower circles ?

Codepen

body {
  background: lavender;
}

#ring {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid green;
}

#ring:before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border: 50px solid red;
  border-radius: 50%;
}

#ring:after {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid white;
}

<div id=ring></div>

Update: here's a link of the complete (not minimal) scenario: Codepen which is only working on the updated Google Chrome at the moment;

解决方案

In your radial progress bar scenario, you can use the approach described here : Circular percent progress bar. Using inline svg and animating the stroke-dasharray attribute for the progress bar.
Adapted to your use case, it can look like this:

body{background:lavender;}
svg{width:200px;height:200px;}

<svg viewbox="-2.5 -2.5 105 105">
  <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="25" stroke="#fff"/>
  <path fill="none" stroke-width="25" stroke="tomato"  stroke-dasharray="251.2,0" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">
    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           
  </path>
</svg>

Note that in this example the animation is made with SMIL. But you can also do it with JS as descirbed in the radial progress bar answer.

---

Previous answer:
If your aim is to remove the bleed, one solution would be to hide it by making the pseudo elements border wider.
Depending on your actual use case this solution can be apropriate.

Here is an example :

body{background:lavender}
#ring {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid green;
}
#ring:before {
  content: '';
  position: absolute;
  top: -51px;
  left: -51px;
  width: 98px;
  height: 98px;
  border: 52px solid red;
  border-radius: 50%;
}
#ring:after {
  content: '';
  position: absolute;
  top: -52px;
  left: -52px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 54px solid white;
}

<div id="ring"></div>

这篇关于重叠的圈出血的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！