javascript - Svg 圆形填充 CSS

Question

可能是一个相对简单的问题，但我找不到答案:

是否可以在一定程度上(具有特定半径)用颜色填充圆？或者有 2 条边框线 - 一条是彩色的，一条是白色的，带有填充色？

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

我希望在此 fiddle 中实现类似(或类似)的目标:

Answer 1

根据评论编辑:
由于我没有找到如何将 css "background-image"应用于 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>