用虚线偏圆? [英] Partial circle with dashed line?

问题描述

我正在尝试创建带有虚线边框的局部圆，但我找不到如何实现的方法.

I'm trying to create a partial circle with dashed border but I can't find out how to achive that.

例如，我想使用SVG创建类似的内容

For instance, I want to create something like this using SVG

我知道如何通过使用"stroke-dasharray"分别创建虚线边框和部分圆.但是我不知道如何将它们结合起来.

I know how to create both dashed border and a partial circle separately by using "stroke-dasharray". But I have no idea how to combine them.

例如，

部分囊泡

<svg viewBox="0 0 320 320">
  <path
    attr.stroke-dasharray="{{stroke_lenth}} {{circumference}}"
    d="M160 10
      a 150 150 0 0 1 0 300
      a 150 150 0 0 1 0 -300"
  />
</svg>

推荐答案

您需要计算路径的起点和终点.接下来绘制弧线.

You'll need to calculate the starting point and the end point of the path. Next you draw the arc.

let center = {x:160,y:160}//the center of the circle
let r = 150;//the radius of the circle
let p1 = {//the starting point
  x:center.x + r*Math.cos(-2),
  y:center.x + r*Math.sin(-2),
}

let p2 = {//the ending point
  x:center.x + r*Math.cos(2.5),
  y:center.x + r*Math.sin(2.5),
}

let path = document.querySelector("path");

path.setAttribute("d",`M${p1.x},${p1.y} A150,150 0 1 1 ${p2.x},${p2.y}`)

<svg viewBox="0 0 320 320" width="300">
  <path stroke-width="5"
    stroke="black" stroke-dasharray="15" fill="none"
    d="M160 10
      a 150 150 0 0 1 0 300
      a 150 150 0 0 1 0 -300"
  />
</svg>

在上面的示例中，起始角度为-1弧度.弧结束的角度为2.5弧度

In the example above the starting angle is -1 radians. The angle where the arc ends is 2.5 radians

这篇关于用虚线偏圆?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！