CODEWITHSUNDEEP
htmlsvgoverlap
Sanya
Sanya

Reputation: 1280

SVG Isometric Box, overlapping lines

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?

enter image description 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>

Upvotes: 1

Views: 131

Answers (1)

r3mainer
r3mainer

Reputation: 24587

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>

Upvotes: 1

Related Questions