SVG Isometri c Коробка, линии перекрытия - PullRequest
Новая
       15

SVG Isometri c Коробка, линии перекрытия

1 голос
/ 24 марта 2020

Это моя первая попытка создания изображений .svg. Я создал изометрический вид 1011 * пластины, но заметил, что при увеличении изображения линии не пересекаются чисто - они перекрываются (см. Изображение).

Что я здесь не так делаю?

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>

1 Ответ

1 голос
/ 24 марта 2020

Проблема состоит в том, что углы с загнутыми углами имеют тенденцию торчать под острыми углами. Простое решение - добавить stroke-linejoin="round" к элементам пути, которые будут округлять их все с одинаковым радиусом.

Но если вам нужны острые углы, вы получите лучшие результаты, если будете рисовать пути и заполняет отдельно, с углами на пути как можно больше. Вот пример. Если вы наводите курсор мыши на мазки, вы сможете увидеть, что происходит: 

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>
...