Круг заполнения SVG CSS

Question

Возможно относительный простой вопрос, но я не могу найти ответ на него:

Можно ли заполнить круг с цветом степени (с определенным радиусом)? Или у вас есть две граничные линии - одна цветная и одна белая с цветом заливки?

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

Я ищу, чтобы достичь что-то вроде этого (или аналогичный) в этом fiddle:

Answer 1

ты это хотел? надеюсь, что это поможет!

var svg = d3.select('body').append('svg') 
.attr('class', 'chart') 
.attr('width', 300) 
.attr('height', 300) 
.append('g') 
.attr('transform', 'translate(100, 100)'); 

svg.append('g') 
.append('circle') 
.attr('r', 30) 
.style('stroke', 'red') 
.style('stroke-width', '6px') 
.style('fill', 'red') 
.style('fill-opacity', 0) 
; 

fiddle

Answer 2

Edit от комментариев:
Как я не нашел, как применить CSS "фоновое изображение" в circle элементов, я добавил путь с помощью JS.

Или вы можете добиться этого с помощью gradients и здесь особенно 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>