Как нарисовать круг прозрачный внутри?

Question

  <div id="contain"></div>

  var svg = document.createElement('svg');
  svg.id = id;
  svg.style.border = '1px solid;';
  svg.style.borderRadius = '50%';
  svg.style.background = 'red';
  svg.style.position = 'absolute';
  svg.setAttribute("class", "newDiv")
  svg.style.width = 20 + "px";
  svg.style.height = 20 + "px";
  svg.style.left = obj.X - 8 + 'px';
  svg.style.top = obj.Y - 8 + 'px';
  svg.innerHTML = '<circle cx="10" cy="10" r="6"></circle>'
  contain.appendChild(svg);

Answer 1

Добавить строки:

  svg.style.border = "3px solid #0000FF"
  svg.style.background = 'transparent';

Answer 2

По пунктам ..по порядку ..создаётся svg и любая сущность с NS

За заливку отвечает: fill

За обводку: stroke-width

За цвет обводки: stroke

let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", 300);
svg.setAttribute("height", 300);
svg.setAttribute("viewBox", "0 0 240 240");
let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("width", "100%");
rect.setAttribute("height", "100%");
rect.setAttribute("x", "0");
rect.setAttribute("y", "0");
rect.setAttribute("fill", "blue");
circle.setAttribute("r", 100);
circle.setAttribute("cx", 120);
circle.setAttribute("cy", 120);
circle.setAttribute("stroke", "red");
circle.setAttribute("stroke-width", 10);
circle.setAttribute("fill", "transparent");
document.body.appendChild(svg);
svg.appendChild(circle);
svg.prepend(rect);

БЛОГ НА HUSL

Как нарисовать круг прозрачный внутри?

Ответы (2 шт):