cemtopkaya/ornek-svg-polyline-cizmek.html

## ornek-svg-polyline-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>
        .circle:hover {
            /* calculate using: (2 * PI * R) */
            stroke-dasharray: 227;
            stroke-dashoffset: 0;
            animation-iteration-count: infinite;
            animation-name: rotate;
            animation-duration: 2s;
            animation-direction: alternate;
            animation-timing-function: linear;
        }

        @keyframes rotate {
            to {
                stroke-dashoffset: 227;
            }
        }
    </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()

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

        var svg = d3.select("svg");
        svg
            .on("mousedown", function () {

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

                svg.append("line") // son çizginin izi için

                svg.append("polyline")
                    .attr("fill", "aqua")
                    .attr("stroke", "black")
                    .attr("points", pointStart.x + "," + pointStart.y)

            })
            .on("mousemove", function () {
                if (isStartedToDraw) {
                    pointStop.x = event.x
                    pointStop.y = event.y

                    // son noktayı bulup farenin pozisyonuna göre hizalayalım
                    var points = svg.select("polyline").attr("points")
                    var lastPoint = points.split(" ").last()
                    lastPoint = lastPoint.split(",")

                    svg.select("line") // iz çizgimiz
                        .attr("x1", lastPoint[0])
                        .attr("y1", lastPoint[1])
                        .attr("x2", event.x-8)
                        .attr("y2", event.y-8)
                        .attr("stroke", "red")
                }
            })
            .on("mouseup", function () {
                pointStop.x = event.x-8
                pointStop.y = event.y-8

                var points = svg.select("polyline").attr("points")
                svg.select("polyline")
                    .attr("points", points + " " + pointStop.x + "," + pointStop.y)
            })
    </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>
	.circle:hover {
	/* calculate using: (2 * PI * R) */
	stroke-dasharray: 227;
	stroke-dashoffset: 0;
	animation-iteration-count: infinite;
	animation-name: rotate;
	animation-duration: 2s;
	animation-direction: alternate;
	animation-timing-function: linear;
	}

	@keyframes rotate {
	to {
	stroke-dashoffset: 227;
	}
	}
	</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()

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

	var svg = d3.select("svg");
	svg
	.on("mousedown", function () {

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

	svg.append("line") // son çizginin izi için

	svg.append("polyline")
	.attr("fill", "aqua")
	.attr("stroke", "black")
	.attr("points", pointStart.x + "," + pointStart.y)

	})
	.on("mousemove", function () {
	if (isStartedToDraw) {
	pointStop.x = event.x
	pointStop.y = event.y

	// son noktayı bulup farenin pozisyonuna göre hizalayalım
	var points = svg.select("polyline").attr("points")
	var lastPoint = points.split(" ").last()
	lastPoint = lastPoint.split(",")

	svg.select("line") // iz çizgimiz
	.attr("x1", lastPoint[0])
	.attr("y1", lastPoint[1])
	.attr("x2", event.x-8)
	.attr("y2", event.y-8)
	.attr("stroke", "red")
	}
	})
	.on("mouseup", function () {
	pointStop.x = event.x-8
	pointStop.y = event.y-8

	var points = svg.select("polyline").attr("points")
	svg.select("polyline")
	.attr("points", points + " " + pointStop.x + "," + pointStop.y)
	})
	</script>
	</body>

	</html>