svg_coords – Drawing a coordinate system https://codescreens.com

svg_coords.svg

<svg xmlns="http://www.w3.org/2000/svg">
<!-- Drawing a coordinate system -->
<!-- https://codepen.io/vbarbarosh/pen/NVeZEw -->
<!-- <img src="svg_coords.svg" width="401" height="401"> -->
<!-- <image xlink:href="svg_coords.svg" x="-50%" y="-50%"
        width="100%" height="100%" /> -->
<defs>
    <!-- http://stackoverflow.com/a/14209704 -->
    <pattern id="subgrid" width="10" height="10" patternUnits="userSpaceOnUse">
        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="#999"
            stroke-width="0.5" />
    </pattern>
    <pattern id="grid" x="50%" y="50%" width="100" height="100"
            patternUnits="userSpaceOnUse">
        <path d="M 100 0 L 0 0 0 100" fill="none" stroke="#999" />
        <rect width="100" height="100" fill="url(#subgrid)" />
    </pattern>
    <!-- http://vanseodesign.com/web-design/svg-markers/ -->
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3"
            orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
    </marker>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
<line x1="0" y1="50%" x2="100%" y2="50%" stroke="black"
    transform="translate(-10 0)" marker-end="url(#arrow)" />
<line x1="50%" y1="0%" x2="50%" y2="100%" stroke="black"
    transform="translate(0 -10)" marker-end="url(#arrow)" />
</svg>