SVG <circle> 填充覆盖前一个圆圈

Posted 2023-02-16

【中文标题】SVG <circle> 填充覆盖前一个圆圈

【英文标题】：SVG <circle> fill covering previous circle

【发布时间】：2017-06-05 15:35:33

【问题描述】：

我正在构建一个 svg 循环进度图。

我正在尝试设置我的 svg 笔画以匹配 circle.center 的可见部分，但是当我更改 circle.progress 的笔画时，它不会将圆圈的填充缩小到足以显示 circle.progress 的黑色部分并匹配实际进度条的宽度。

<svg  >
    <circle class="progress" id="progress-radial-1" r="125"/>
    <circle class="center" r="140" cx="140" cy="140" />
    <text text-anchor="middle" x="150" y="185" />
</svg>

这是一个小提琴：https://jsfiddle.net/BenRacicot/2kc7c56j/

这是 svg 的结果（左）： 我试图在右边得到结果。如您所见，控制蓝色进度条（50％）的 circle.center 在图像中也有一个白色填充（小提琴中的灰色），并且过多地覆盖了黑色 svg 笔划。我需要该笔划与蓝色的宽度相同。

【参考方案1】：

center 和 progress 圆的原点不同，应该相同（现在设置为 150）。

center 现在的半径比progress 小 25px，以适应其笔划。

因此，如果您像这样更新标记，将center 的填充更改为#ddd，并将svg 背景更改为#000，您将获得所需的布局

<div class="pie-wrapper">
  <svg  >
    <circle class="progress" id="pr1" r="125" cx="150" cy="150"/>
    <circle class="center" r="100" cx="150" cy="150" />
    <text text-anchor="middle" x="150" y="175" />
  </svg>
</div>

Updated fiddle

堆栈sn-p

window.addEventListener('load', function() 
  function radialProgress(update, id)
    let rd = document.getElementById(id).getAttribute("r"); 
    let i = 0;
    let a = 0;
    let x = rd * 2 * Math.PI;
    i = update;
    a = i / 100;
    let p = x * a;

    jQuery(".progress").attr("stroke-dasharray", p + ", " + x);
    jQuery(".progress").attr("stroke", "#0065a4");
    jQuery("text").text(update + "%");
  

  radialProgress(50, 'pr1');
)

.pie-wrapper
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    .pie-wrapper svg 
        background: #000;
        border-radius: 50%;
    

.progress 
    stroke-width: 50;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;


.center 
    fill: #ddd;


text 
    fill: #fff;
    font-family: 'Share Tech Mono';
    font-size: 80px;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="pie-wrapper">
  <svg  >
    <circle class="progress" id="pr1" r="125" cx="150" cy="150"/>
    <circle class="center" r="100" cx="150" cy="150" />
    <text text-anchor="middle" x="150" y="175" />
  </svg>
</div>

---

注意，控制蓝色进度条的是progress圆圈（50%），而不是center，黑色svg没有笔划，它有（有) 只有深灰色背景。

【讨论】：

感谢您的精彩回答@LGSon。但是，如果您再次看到我的小提琴（更新），似乎 SVG #333 仍然是全黑部分宽度的一半。 （仍然无法理解是什么在控制它）我希望尽可能放入渐变，因此我假设需要正确对齐它们。

@BenRacicot 笔画的宽度跨入圆的一半，一半在外面，所以笔画宽度的中心在圆的边缘

@BenRacicot 添加您的渐变，如果它们行为不端，请在此处给我留言，我会看看

@BenRacicot 如果你检查这个小提琴，我删除了除了progress 圆圈之外的所有内容，https://jsfiddle.net/2kc7c56j/6/，你会看到中风的行为。我用红色填充它以显示发生了什么

@FrankWisniewski 我检查了，他们旋转不同，虽然我在这里解决了笔画问题，旋转问题是新的问题和答案