Svg zeichnen gestrichelte Glockenkurve zwischen 2 Punkten

Question

Ich möchte eine Glockenkurve zeichnen, die wie das Bild unten aussieht, mit Svg. Also im Wesentlichen sollte ich 3 Parameter übergeben können: x1, x2 und Höhe und es sollte eine gestrichelte Glockenkurve zeichnen. Was ist der beste Weg, dies zu erreichen?

Hier ist, was ich habe eine regelmäßige Bezierkurve zum Zeichnen. Im Grunde muss ich herausfinden, wie es zu einer Glockenkurve zu konvertieren:

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

Sie können eine kubische Kurve verwenden, um eine Kurve zu erhalten, die eine Glocke annähert. Kubische Kurven gezeichnet mit C in SVG:

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" />

Möglicherweise möchten Sie bewegen/add Griffe die Glockenkurve passen mehr richtig. Auch Vorlagenliterale können bei Bedarf durch eine Zeichenfolgeverkettung ersetzt werden.