css-grid/grid-lines.svg

<svg
	xmlns="http://www.w3.org/2000/svg"
	width="540" height="320"
	viewBox="0 0 540 320"
>

<style type="text/css"><![CDATA[
text {
	stroke: none;
	fill: black;
}

.length {
	font-family: monospace;
}

]]></style>


<defs>

<g id="pointer">
	<use href="#arrow" fill="orange" />
</g>

<g id="distance">
	<use href="#arrow" fill="black" />
</g>

<!-- 左向き矢印 -->
<path id="arrow" stroke="none"
	d="m0,0 l12,-4 v3 h28 v2 h-28 v3 z"
/>

</defs>


<rect x="0" y="0" width="540" height="320"
	fill="white"
	stroke="none"
	stroke-width="1"
/>
	<g transform="translate(400, 80)"
		fill="none"
		stroke="black"
		font-size="16"
	>

<!-- guide-lins -->
<path
	stroke="black"
	stroke-width="2"
	stroke-dasharray="10,5" stroke-dashoffset="0"
	d="M0,0 h-350
	M0,50 h-350
	M0,170 h-350
	M0,220 h-350
	M-350,0 v220
	M-200,0 v220
	M-0,0 v220
" />
<!-- 右側 -->
		<g text-anchor="start">
			<g transform="translate(0,0)" >
<use href="#pointer" />
<text x="44" y="6">罫 1</text>
			</g>
			<g transform="translate(0,50)" >
<use href="#pointer" />
<text x="44" y="6">罫 2</text>
			</g>
			<g transform="translate(0,170)" >
<use href="#pointer" />
<text x="44" y="6">罫 3</text>
			</g>
			<g transform="translate(0,220)" >
<use href="#pointer" />
<text x="44" y="6">罫 4</text>
			</g>

			<g transform="translate(20,0)" >
<use href="#distance"  transform="rotate(90)" />
			</g>

			<g transform="translate(20,50)" >
<use href="#distance" transform="rotate(-90)"/>
<use href="#distance" transform="rotate(90)" />
			</g>

			<g transform="translate(20,170)" >
<use href="#distance" transform="rotate(-90)"/>
<use href="#distance" transform="rotate(90)" />
<use href="#distance" transform="translate(0,50)rotate(-90)"/>
			</g>

			<g class="length">
<text x="30" y="31">50px</text>
<text x="10" y="120">1fr</text>
<text x="30" y="201">50px</text>
			</g>

		</g>

<!-- 上側 -->

		<g text-anchor="middle">
			<g transform="translate(-350,0)" >
<use href="#distance" transform="translate(0,-20)scale(1)"/>
<use href="#pointer" transform="rotate(-90)"/>
<text x="0" y="-44">罫 1</text>
			</g>

			<g transform="translate(-200,0)" >
<use href="#distance" transform="translate(0,-20)scale(1)"/>
<use href="#distance" transform="translate(0,-20)scale(-1)"/>
<use href="#pointer" transform="rotate(-90)"/>
<text x="0" y="-44">罫 2</text>
			</g>

			<g transform="translate(0,0)" >
<use href="#pointer" transform="rotate(-90)"/>
<use href="#distance" transform="translate(0,-20)scale(-1)"/>
<text x="0" y="-44">罫 3</text>
			</g>

			<g class="length" transform="translate(0,-15)">
<text x="-100" >1fr</text>
<text x="-275" >150px</text>
			</g>
		</g>
	</g>
</svg>