How to create an arc with different colors in SVG with html?-CodePudding

I need to create an svg image like this

<svg width="600" height="400">
    <path d="M100,200 Q250,100 400,200" fill="none" stroke="red" stroke-width="25px" />
</svg>

I tried the above code but I don't know how to specify the color gradients.

CodePudding user response：

<circle> can be used in combination with stroke-dasharray, stroke-dashoffset and pathLength.

I chose a path length of 200 to make the upper part of the arc 100 % and the negative numbers in dashoffset are then the startingpoint and the fist number in dasharray are the length of the lines. I rotate the entire thing to make it start at 9 o'clock.

<svg viewBox="0 0 100 60" width="400">
  <rect width="100%" height="100%" fill="#eee"/>
  <g transform="rotate(180 50 50)" fill="none" stroke-width="5">
    <circle cx="50" cy="50" r="45" stroke="yellow"
      stroke-dashoffset="-90" stroke-dasharray="10 200" pathLength="200" />
    <circle cx="50" cy="50" r="45" stroke="blue"
      stroke-dashoffset="-65" stroke-dasharray="25 200" pathLength="200" />
    <circle cx="50" cy="50" r="45" stroke="green"
      stroke-dashoffset="-40" stroke-dasharray="25 200" pathLength="200" />
    <circle cx="50" cy="50" r="45" stroke="red"
      stroke-dashoffset="0" stroke-dasharray="40 200" pathLength="200" />
  </g>
</svg>

CodePudding user response：

And then make it a Standard Web Component <svg-arcs> supported in all Browsers
to make it (your own) semantic HTML
use an UnknownHTMLElement <segment>
that get replaced by <circle>

customElements.define("svg-arcs", class extends HTMLElement {
  connectedCallback() {
    setTimeout(() => {
      let offset = -90;
      let width = this.getAttribute("width")||8;
      this.innerHTML = `<svg viewBox="0 0 100 50">
        <g transform="rotate(180 50 50)" fill="none" 
           stroke-width="${width}">
          ${[...this.querySelectorAll("segment")].map((s,idx)=>{
             let size = Number(s.getAttribute("size"));
             if (idx) offset =size;
             return  `<circle cx="50" cy="50" r="${50-width}"
                              stroke="${s.getAttribute("stroke")}"
                              stroke-dashoffset="${offset}" 
                              stroke-dasharray="${size} 200" 
                              pathLength="200"/>`;
             }).join("")}
        </g></svg>`;
    });
  }
})

svg-arcs{
  width:300px;
  background:beige;
}
body{
  display:flex;
}

<svg-arcs>
  <segment size="10" stroke="yellow" />
  <segment size="25" stroke="green" />
  <segment size="25" stroke="blue" />
  <segment size="40" stroke="red" />
</svg-arcs>

<svg-arcs width="20">
  <segment size="10" stroke="yellow" />
  <segment size="25" stroke="green" />
  <segment size="25" stroke="blue" />
  <segment size="40" stroke="red" />
</svg-arcs>