मेरे पास HTML में SVG में एक संकेंद्रित वृत्त है, लेकिन मैं चाहूंगा कि निचला आधा शीर्ष आधे जैसा दिखे। नीचे मंडलियों को गलत तरीके से संरेखित किया गया है।

const svgNs = "http://www.w3.org/2000/svg";
let svg = document.querySelector("svg");

function drawHalfCircle(x, y, r, sweepFlag, width) {
  let path = document.createElementNS(svgNs, "path");
  let xStart = x - r;
  let xEnd = x + r;
  let command = `M ${xStart} ${y} A ${r} ${r} 0 0 ${sweepFlag} ${xEnd} ${y}`;
  path.setAttribute("d", command);
  path.setAttribute("stroke", "#627ca9");
  path.setAttribute("fill", "none");
  path.setAttribute("stroke-width", width.toString());
  svg.appendChild(path);
}  

let width = 10;
let nrOfCircles = 1000 / width / 2 - 2;
for(let i = 0; i < nrOfCircles; i++) {
  let r = width + i * width;
  let sweepFlag = i % 2;
  drawHalfCircle(500, 500, r, sweepFlag, width);
}
html, body {
  height: 100%;
  margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
<svg viewBox="0 0 1000 1000" >
</svg>

मैं जावास्क्रिप्ट के लिए नया हूं, मैंने सेटिंग्स को ट्वीक किया लेकिन समाधान तक नहीं पहुंच सका।

पहले ही, आपका बहुत धन्यवाद। मेरी अंग्रेज़ी के लिये क्षमा।

2
Sergio C 19 अक्टूबर 2019, 22:28

3 जवाब

सबसे बढ़िया उत्तर

समस्या यह है कि आप अपने टॉप और बॉटम सर्कल के लिए अलग-अलग xstart और xend देते हैं। त्रिज्या भी ऊपर और नीचे वाले के लिए अलग है।

const svgNs = "http://www.w3.org/2000/svg";
let svg = document.querySelector("svg");

function drawHalfCircle(x, y, r, sweepFlag, width) {
  let path = document.createElementNS(svgNs, "path");
  let xStart = x - r;
  let xEnd = x + r;
  let command = `M ${xStart} ${y} A ${r} ${r} 0 0 ${sweepFlag} ${xEnd} ${y}`;
  path.setAttribute("d", command);
  path.setAttribute("stroke", "#627ca9");
  path.setAttribute("fill", "none");
  path.setAttribute("stroke-width", width.toString());
  svg.appendChild(path);
}  

let width = 10;
let nrOfCircles = 1000 / width / 2 - 2;
for(let i = 0; i < nrOfCircles; i = i+2) { //changes here
  let r = width + i * width;
  drawHalfCircle(500, 500, r, 0, width); //changes here
  drawHalfCircle(500, 500, r, 1, width); //changes here
}
html, body {
  height: 100%;
  margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
<svg viewBox="0 0 1000 1000" >
</svg>
3
Swaroop Deval 19 अक्टूबर 2019, 20:07

आप केवल मंडलियों का उपयोग क्यों नहीं करते?

const svgNs = "http://www.w3.org/2000/svg";
let svg = document.querySelector("svg");

function drawFullCircle(x, y, r, width) {
  let circle = document.createElementNS(svgNs, "circle");

  circle.setAttribute("r", r);
  circle.setAttribute("cy", y);
  circle.setAttribute("cx", x);
  circle.setAttribute("stroke", "#627ca9");
  circle.setAttribute("fill", "none");
  circle.setAttribute("stroke-width", width.toString());
  svg.appendChild(circle);
}

let width = 10;
let nrOfCircles = 50;
for (let i = 0; i < nrOfCircles; i++) {
  let r = width + i * width;
  drawFullCircle(500, 500, r, 2);
}
html,
body {
  height: 100%;
  margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
<svg viewBox="0 0 1000 1000">
</svg>
2
ksav 19 अक्टूबर 2019, 20:05

ऐसा इसलिए है क्योंकि आप लूप के प्रत्येक पुनरावृत्ति के साथ अपने अर्ध-वृत्त की चौड़ाई बढ़ा रहे हैं, भले ही आप पथ को फ़्लिप कर रहे हों या नहीं। इसका मतलब यह है कि जब आप चाहते हैं कि दोनों एक ही आकार के हों, तो आपकी सीधी वृत्त हमेशा आपके उल्टे से एक कदम चौड़ी होगी। आप सम/विषम पुनरावृत्तियों के प्रत्येक सेट के लिए समान चौड़ाई बनाए रखकर इसे आसानी से ठीक कर सकते हैं:

const svgNs = "http://www.w3.org/2000/svg";
let svg = document.querySelector("svg");

function drawHalfCircle(x, y, r, sweepFlag, width) {
  let path = document.createElementNS(svgNs, "path");
  let xStart = x - r;
  let xEnd = x + r;
  let command = `M ${xStart} ${y} A ${r} ${r} 0 0 ${sweepFlag} ${xEnd} ${y}`;
  path.setAttribute("d", command);
  path.setAttribute("stroke", "#627ca9");
  path.setAttribute("fill", "none");
  path.setAttribute("stroke-width", width.toString());
  svg.appendChild(path);
}  

let width = 10;
let nrOfCircles = 1000 / width / 2 - 2;
for(let i = 0; i < nrOfCircles; i++) {
  let sweepFlag = i % 2;
  let r = width + (sweepFlag === 0 ? i : (i-1) ) * width; // Subtract one from iterator used to increment width on odd iterations
  drawHalfCircle(500, 500, r, sweepFlag, width);
}
html, body {
  height: 100%;
  margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
<svg viewBox="0 0 1000 1000" >
</svg>
2
Chris B. 19 अक्टूबर 2019, 20:06