svg는 2 점 사이에서 점선으로 된 점선을 그립니다.

Question

나는 아래의 이미지처럼 보이는 svg로 종형 곡선을 그리 고 싶습니다. 그래서 본질적으로 x1, x2, height라는 3 개의 매개 변수를 전달할 수 있어야하며 파선 곡선을 그려야합니다. 이것을 달성하는 가장 좋은 방법은 무엇입니까? 여기

내가 정기적으로 베 지어 곡선을 그리기 위해 가지고 것입니다. 기본적으로 나는 종형 곡선으로 변환하는 방법을 알아낼해야합니다

function getDimension(x1, x2, height) { 
    return "M" + x1 + "," + height + " C" + x1 + ",0 " + x2 + ",0 " + x2 + "," + height; 
} 

var curve = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
curve.setAttribute("d", getDimension(0, 100, 50)); 
curve.setAttribute("x", '0'); 
curve.setAttribute("fill", 'none'); 
curve.setAttribute("stroke", 'black'); 
curve.setAttribute("stroke-dasharray", '5'); 
document.getElementById('svg').appendChild(curve); 

Answer 1

당신은 종에 가까운 곡선을 얻을 수있는 차 곡선을 사용할 수 있습니다. 큐빅 곡선은 SVG에서 C를 사용하여 그려집니다 :

function bellCurve(x1, x2, height) 
 
{ 
 
    var width = x2-x1; 
 
    var quart = width/4; 
 
    
 
    return `M0 ${height} C ${quart} ${height}, ${quart} 0, ${quart*2} 0, ${quart*3} 0, ${quart*3} ${height}, ${quart*4} ${height}`; 
 
} 
 

 
var curve = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
 
curve.setAttribute("d", bellCurve(0, 100, 50)); 
 
curve.setAttribute("x", '0'); 
 
curve.setAttribute("fill", 'none'); 
 
curve.setAttribute("stroke", 'black'); 
 
curve.setAttribute("stroke-dasharray", '5'); 
 
document.getElementById('svg').appendChild(curve);

<svg id="svg" />

당신은 이동/더 정확하게 종형 곡선에 맞게 핸들을 추가 할 수 있습니다. 또한 템플리트 리터럴은 필요할 때 문자열 연결로 대체 될 수 있습니다.