CODEWITHSUNDEEP
javascriptcsssvg
nlv
nlv

Reputation: 831

Svg Circle fill CSS

Probably a relative simple question but I cant find an answer to it:

Is it possible to fill a circle with a colour to an extent ( with a particular radius) ? Or have 2 border lines - one coloured and one white with a fill colour ?

style="fill:steelblue; stroke-width: 2px; stroke: #8cc63f;"

I'm looking to achieve something like this (or similar) in this fiddle:

enter image description here

Upvotes: 0

Views: 1390

Answers (1)

Kaiido
Kaiido

Reputation: 136628

Edit from comments:
As I didn't found how to apply css "background-image" to circle elements, I added a way using js.

Or you can achieve this using gradients and here particularly radial-gradients :

var svg = document.querySelectorAll('svg')[0],
  r = 30,
  cy = 60,
  nr = r - (r * 0.7),
  c1 = document.querySelectorAll('circle')[0],
  //Assuming you already have those ones

  //first make a copy of the circle you just made
  c2 = c1.cloneNode();

//then apply new styles to the first circle
c1.setAttributeNS(null, "fill", "transparent");
c1.style.stroke = "#8cc63f";
c1.style.strokeWidth = "2px";
c1.parentNode.appendChild(c2);

//and to the new one
c2.setAttributeNS(null, "fill", "red");
c2.style.strokeWidth = "0";
c2.r.baseVal.value = r - nr; //change its radius

//Wrap thoe elements into a single g that will act as one element
var g = document.createElementNS("http://www.w3.org/2000/svg", 'g');
g.appendChild(c2);
g.appendChild(c1);
svg.appendChild(g)
<svg width="720" height="120">
  <defs>
    <radialGradient id="gradient">
      <stop offset="0%" stop-color="red" />
      <stop offset="70%" stop-color="red" />
      <stop offset="71%" stop-color="transparent" />
    </radialGradient>
  </defs>
  <circle cx="40" cy="60" r="30"></circle>
  <circle cx="120" cy="60" r="30" style="fill:url(#gradient); stroke-width: 2px; stroke: #8cc63f;"></circle>
</svg>

Upvotes: 1

Related Questions