cemtopkaya/ornek-svg-path-cizmek.html

## ornek-svg-path-cizmek.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
    </style>
</head>

<body>
    <svg width="960" height="500" style="border:1px solid red;"></svg>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script>
        let log = console.log
        let isStartedToDraw = false
        let pointStart = document.querySelector("svg").createSVGPoint()
        let pointStop = document.querySelector("svg").createSVGPoint()
        let data = []

        if (!Array.prototype.last) {
            Array.prototype.last = function () {
                return (this.length) ?
                    this[this.length - 1] :
                    null
            };
        };

        var svg = d3.select("svg");
        var linearfn = d3.line()
            .x(d => d.x)
            .y(d => d.y)
            .curve(d3.curveLinear)

        svg.on("mousedown", function () {

                isStartedToDraw = true // çizmeye başladık
                pointStart.x = event.x - 8
                pointStart.y = event.y - 8

                //points.push(pointStart)
                data.push({
                    x: pointStart.x,
                    y: pointStart.y
                })

                svg.append("path")
                    .attr("fill", "aqua")
                    .attr("stroke", "black")
                    .attr("stroke-width", 2)
                    .attr("d", linearfn(data))
            })
            .on("mousemove", function () {
                // fare hareketinde de çizdireceğiz ama x,y noktasını
                // tıklanıncaya kadar diziye eklemeyeceğiz
                if (isStartedToDraw) {
                    pointStop.x = event.x - 8
                    pointStop.y = event.y - 8

                    svg.select("path")
                        .attr("d", linearfn(data.concat({
                            x: pointStop.x,
                            y: pointStop.y
                        })))
                }
            })
            .on("mouseup", function () {
                pointStop.x = event.x - 8
                pointStop.y = event.y - 8

                data.push({
                    x: pointStop.x,
                    y: pointStop.y
                })

                svg.select("path")
                    .attr("d", linearfn(data))
            })
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style>
	</style>
	</head>

	<body>
	<svg width="960" height="500" style="border:1px solid red;"></svg>
	<script src="https://d3js.org/d3.v5.js"></script>
	<script>
	let log = console.log
	let isStartedToDraw = false
	let pointStart = document.querySelector("svg").createSVGPoint()
	let pointStop = document.querySelector("svg").createSVGPoint()
	let data = []

	if (!Array.prototype.last) {
	Array.prototype.last = function () {
	return (this.length) ?
	this[this.length - 1] :
	null
	};
	};

	var svg = d3.select("svg");
	var linearfn = d3.line()
	.x(d => d.x)
	.y(d => d.y)
	.curve(d3.curveLinear)

	svg.on("mousedown", function () {

	isStartedToDraw = true // çizmeye başladık
	pointStart.x = event.x - 8
	pointStart.y = event.y - 8

	//points.push(pointStart)
	data.push({
	x: pointStart.x,
	y: pointStart.y
	})

	svg.append("path")
	.attr("fill", "aqua")
	.attr("stroke", "black")
	.attr("stroke-width", 2)
	.attr("d", linearfn(data))
	})
	.on("mousemove", function () {
	// fare hareketinde de çizdireceğiz ama x,y noktasını
	// tıklanıncaya kadar diziye eklemeyeceğiz
	if (isStartedToDraw) {
	pointStop.x = event.x - 8
	pointStop.y = event.y - 8

	svg.select("path")
	.attr("d", linearfn(data.concat({
	x: pointStop.x,
	y: pointStop.y
	})))
	}
	})
	.on("mouseup", function () {
	pointStop.x = event.x - 8
	pointStop.y = event.y - 8

	data.push({
	x: pointStop.x,
	y: pointStop.y
	})

	svg.select("path")
	.attr("d", linearfn(data))
	})
	</script>
	</body>

	</html>