SVG <circle>填充覆盖前一个圆圈-Java 学习之路

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

我试图调整我的svg的笔划以匹配circle.center的可见部分，但是当我改变circle.progress的笔划时，它不会缩小圆圈的填充，足以显示circle.progress的黑色部分并匹配宽度实际进度条 .

<svg width="300" height="300">
    <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的结果（左）：
enter image description here
我试图在右边得到结果 . 正如您所看到的，控制蓝色进度条的圆形中心（50％）也有一个填充图像中的白色（小提琴中的灰色）并且覆盖黑色svg笔划太多 . 我需要那个笔画与蓝色的宽度相同 .

1 回答

center 和 progress circle具有不同的原点并且应该具有相同的（现在设置为150） .

center 现在的半径比 progress 小25px，以适应其行程 .

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

<div class="pie-wrapper">
  <svg width="300" height="300">
    <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

堆栈代码段

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 width="300" height="300">
    <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 没有笔画，它只有深灰色背景 .

回复于 2024-05-04T23:19:49+08:00

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

1 回答

相关问题