All geek questions in one place

SVG string in y = mx + c format

I want to draw an SVG string considering slope and constant or y=m*x +c.

Is there a direct way to do this in SVG or indirectly?

Thanks in advance.

+4
source share
3 answers

Tag <line>supports only the start and end attributes ( x1, y1, x2, y2). Thus, you will need to manually select the x coordinates outside the canvas and use y2= y1+ m ( x2- x1).

Edit

Looking through the specification, it is possible to convert individual elements as needed:

<line ... transform="translate(x, y) rotate(theta)" />

theta - .

, (-10000, 0) (10000, 0), , :

<line x1="-10000" y1="0" x2="10000" y2="0" transform="translate(150, 200) rotate(-30)" />

( , ) (150, 200) π/6 .

+3

SVG - . Javascript .

, HTML . , SVG (400x400) y=mx+c. , y svg , y .

javascript.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Draw Line y=mx+b</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Draw Line y=mx+b</h4>
Red line is original points. Dashed extends to start(0)/end(400) of x axis
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400">
<line id="myLine2" stroke="black" stroke-width="3" stroke-dasharray="10 10" />
<line id="myLine1" stroke="red" stroke-width="5" />
</svg>
</div>
  <br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea>
  <br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<div id='browserDiv' style='padding:5px;position:absolute;top:5px;left:5px;background-color:gainsboro;'>OK in:IE11/CH32/FF23<br /></div>
<script id=myScript>
function DrawLineToAxis()
{
    var x1=120
    var y1=150
    var x2=360
    var y2=290
    var m=(y2-y1)/(x2-x1)
    myLine1.setAttribute("x1",x1)
    myLine1.setAttribute("y1",y1)
    myLine1.setAttribute("x2",x2)
    myLine1.setAttribute("y2",y2)

    /*
    y=m*x-m*120+150
    */
    //---extend to x=0 x=400
    x1=0
    y1=-m*120+150
    x2=400
    y2=m*x2-m*120+150

    myLine2.setAttribute("x1",x1)
    myLine2.setAttribute("y1",y1)
    myLine2.setAttribute("x2",x2)
    myLine2.setAttribute("y2",y2)
}

</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
    DrawLineToAxis()
    svgSourceValue.value=svgDiv.innerHTML
    jsValue.value=myScript.text
}
</script>

</body>

</html>
0

Below is my code:

function linemc(m,c){
var x,y,xm=[],ym=[];

x=-1;y=m*x+c;if(y>=0&&y<ysize) {xm.push(x);ym.push(y);}
x=xsize+1;y=m*x+c;if(y>=0&&y<ysize) {xm.push(x);ym.push(y);}

y=-1;x=(y-c)/m;if(x>=0&&x<xsize+1) {xm.push(x);ym.push(y);}
y=ysize+1;x=(y-c)/m;if(x>=0&&x<xsize+1) {xm.push(x);ym.push(y);}

return new line(xm[0],ym[0],xm[1],ym[1]);
}

where the new line just creates a DOM node for the line, taking four arguments

and xsize and ysize - canvas size

-1
source

Source: https://habr.com/ru/post/1533344/

More articles:


All Articles