<title>SVG lines with transform/rotate</title>
<svg width="200" height="200">
<rect x="1" y="1" width="199" height="199" fill="none" stroke="grey" stroke-width="1" />
<g stroke="steelblue" stroke-width="12" stroke-linecap="round">
<line x1="100" y1="100" x2="150" y2="100" transform="rotate(0 100 100)" />
<line x1="100" y1="100" x2="150" y2="100" transform="rotate(180 100 100)" />
<line x1="100" y1="100" x2="150" y2="100" transform="rotate(45 100 100)" />
<line x1="100" y1="100" x2="150" y2="100" transform="rotate(-45 100 100)" />
<line x1="100" y1="100" x2="150" y2="100" transform="rotate(90 100 100)" />
<line x1="100" y1="100" x2="150" y2="100" transform="rotate(-90 100 100)" />
<line x1="100" y1="100" x2="150" y2="100" transform="rotate(135 100 100)" />
<line x1="100" y1="100" x2="150" y2="100" transform="rotate(-135 100 100)" />