cemtopkaya/ornek-svg-cizgi-cizmek.html

## ornek-svg-cizgi-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()

        var svg = d3.select("svg");
        svg
            .on("mousedown", function () {
                log('basildi: ', pointStart, isStartedToDraw)
                isStartedToDraw = true
                pointStart.x = event.x
                pointStart.y = event.y
                svg.append("line")
                    .attr("x1", pointStart.x)
                    .attr("y1", pointStart.y)
                    .attr("stroke", "black")

            })
            .on("mousemove", function () {
                if (isStartedToDraw) {
                    pointStop.x = event.x
                    pointStop.y = event.y
                    //log('sürükleniyor: ', pointStop)
                    svg.select("line")
                        .attr("x2", pointStop.x)
                        .attr("y2", pointStop.y)
                }
            })
            .on("mouseup", function () {
                if (isStartedToDraw) {
                    pointStop.x = event.x
                    pointStop.y = event.y
                    log('birakildi: ', pointStop)
                    svg.select("line")
                        .attr("x2", pointStop.x)
                        .attr("y2", pointStop.y)
                    isStartedToDraw = false
                }
            })

    </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()

	var svg = d3.select("svg");
	svg
	.on("mousedown", function () {
	log('basildi: ', pointStart, isStartedToDraw)
	isStartedToDraw = true
	pointStart.x = event.x
	pointStart.y = event.y
	svg.append("line")
	.attr("x1", pointStart.x)
	.attr("y1", pointStart.y)
	.attr("stroke", "black")

	})
	.on("mousemove", function () {
	if (isStartedToDraw) {
	pointStop.x = event.x
	pointStop.y = event.y
	//log('sürükleniyor: ', pointStop)
	svg.select("line")
	.attr("x2", pointStop.x)
	.attr("y2", pointStop.y)
	}
	})
	.on("mouseup", function () {
	if (isStartedToDraw) {
	pointStop.x = event.x
	pointStop.y = event.y
	log('birakildi: ', pointStop)
	svg.select("line")
	.attr("x2", pointStop.x)
	.attr("y2", pointStop.y)
	isStartedToDraw = false
	}
	})

	</script>
	</body>

	</html>