06-svg/line.html

<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8" />
	<title>Line in SVG</title>
</head>

<body>

	<h1>Line in SVG</h1>

	<!--
		https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line
		http://www.w3schools.com/graphics/svg_line.asp

		The x1 attribute defines the start of the line on the x-axis
		The y1 attribute defines the start of the line on the y-axis
		The x2 attribute defines the end of the line on the x-axis
		The y2 attribute defines the end of the line on the y-axis
		-->
		
		<!-- Otazka pro studenty: Proc ma linka na zacatku zkosene hrany? -->

		<svg height="210" width="500">
			<line x1="0" y1="0" x2="200" y2="200" style="stroke: dodgerblue; stroke-width: 5" />
			<line x1="200" y1="200" x2="400" y2="100" style="stroke: red; stroke-width: 5" />
		</svg>

	</body>

	</html>