SVG Isometric Box, overlapping lines - html

Question

This is my first attempt at creating .svg images. I created an isometric view of a plate, but I noticed that when the image scales up, the lines do not intersect cleanly - they overlap (see image).
What am I doing wrong here?
<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="greyGrad" gradientUnits="userSpaceOnUse">
<stop stop-color="#ddd" offset="0%"/>
<stop stop-color="#999" offset="85%"/>
</linearGradient>
</defs>
<g>
<polygon stroke="#333" points="0,0 8,14 11,14 3,0" fill="url(#greyGrad)"/>
<polygon stroke="#333" points="8,14 11,14 11,58 8,58" fill="url(#greyGrad)"/>
<polygon stroke="#333" points="0,0 8,14 8,58 0,45" fill="url(#greyGrad)"/>
</g>
</svg>

Answer 1

The problem is that mitred corners tend to stick out a long way at acute angles. The easy fix is to add stroke-linejoin="round" to your path elements, which will round them all off with the same radius.
But if you want sharp corners, you'll get better results if you draw the paths and fills separately, with the angles in the paths as large as possible. Here's an example. If you hover over the strokes, you should be able to see what's going on:
path:hover { stroke:#888; }
<!-- Cube consisting of three filled quads -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="180" viewBox="0 0 40 36">
<g stroke="#000" stroke-width="4">
<path d="M2,9 26,9 26,33 2,33Z" fill="orange"/>
<path d="M26,9 38,3 38,27 26,33Z" fill="red"/>
<path d="M2,9 14,3 38,3 26,9Z" fill="yellow"/>
</g>
</svg>
<!-- Cube with separate strokes and fills -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="180" viewBox="0 0 40 36">
<!-- Fills (no stroke) -->
<g stroke="none">
<path d="M2,9 26,9 26,33 2,33Z" fill="orange"/>
<path d="M26,9 38,3 38,27 26,33Z" fill="red"/>
<path d="M2,9 14,3 38,3 26,9Z" fill="yellow"/>
</g>
<!-- Strokes (outline first, then interior lines -->
<g fill="none" stroke="#000" stroke-width="4">
<path d="M2,9 14,3 38,3 38,27 26,33 2,33Z"/>
<path d="M2,9 26,9 38,3M26,9 26,33"/>
</g>
</svg>