61 lines
2.3 KiB
XML
61 lines
2.3 KiB
XML
|
|
<!-- W: 2500 + 500 each side -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3500 3600" width="800" height="820"
|
|
font-family="monospace" font-size="48">
|
|
<!-- Background -->
|
|
<rect width="3500" height="3600" fill="#f8f8f8" />
|
|
|
|
<!-- Title -->
|
|
|
|
|
|
<!-- Room in mm. Visual: A at top, F/E (origin) at bottom-left.
|
|
SVG coords = (arch_x, 2600 - arch_y) so Y-up maps to SVG Y-down.
|
|
Polygon (SVG): A(0,0) B(2500,0) C(2500,1000) D(1500,1000) E(1500,2600) F(0,2600)
|
|
Arch coords: A(0,2600) B(2500,2600) C(2500,1600) D(1500,1600) E(1500,0) F(0,0)
|
|
-->
|
|
<!-- Make y be upwards increasing and add 500 padding -->
|
|
<g transform="translate(500, 3000) scale(1,-1)">
|
|
|
|
<!-- Fix text orientation -->
|
|
<g transform="translate(1250, 2850) scale(1,-1)">
|
|
<text text-anchor="middle" font-size="80" font-weight="bold"
|
|
fill="#333">Bathroom
|
|
Blueprint</text>
|
|
|
|
</g>
|
|
|
|
|
|
<!-- Room outline -->
|
|
<polygon
|
|
points="0,0 0,2600 2500,2600 2500,1500 1500,1500 1500,0"
|
|
fill=" white" stroke=" #333" stroke-width=" 16" stroke-linejoin=" miter" />
|
|
|
|
<!-- Default line padding 60 -->
|
|
<line x1="0" y1="calc(0 - 60)" x2="1500" y2="calc(0 - 60)" stroke="#555" stroke-width="4" />
|
|
<line x1="0" y1="calc(0 - 60 - 25)" x2="0" y2="calc(0 - 60 - 25 + 50)" stroke="#555"
|
|
stroke-width="4" />
|
|
<line x1="1500" y1="calc(0 - 60 - 25)" x2="1500" y2="calc(0 - 60 - 25 + 50)" stroke="#555"
|
|
stroke-width="4" />
|
|
|
|
<!-- Move in our coordinate then flip for text readable -->
|
|
<!-- text half way and on y - 120 -->
|
|
<g transform="translate(750, -120) scale(1,-1)">
|
|
<text text-anchor="middle" dominant-baseline="central" font-size="48" fill="#555">
|
|
1500</text>
|
|
</g>
|
|
|
|
<line x1="0" y1="calc(2600 + 60)" x2="2500" y2="calc(2600 + 60)" stroke="#555" stroke-width="4" />
|
|
<line x1="0" y1="calc(2600 + 60 - 25)" x2="0" y2="calc(2600 + 60 - 25 + 50)" stroke="#555"
|
|
stroke-width="4" />
|
|
<line x1="2500" y1="calc(2600 + 60 - 25)" x2="2500" y2="calc(2600 + 60 - 25 + 50)" stroke="#555"
|
|
stroke-width="4" />
|
|
<!-- Move in our coordinate then flip for text readable -->
|
|
<!-- text half way and on y + 120 -->
|
|
<g transform="translate(1250, 2720) scale(1,-1)">
|
|
<text text-anchor="middle" dominant-baseline="central" font-size="48" fill="#555">
|
|
2500</text>
|
|
</g>
|
|
|
|
</g>
|
|
|
|
</svg> |