SVG Isometric Grid (Branch 6917)
✨ CHANAPON CHUENCHUWIT
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#80DEEA; box-shadow:0 0 20px #0002; width:100%; } </style> </head> <body> <svg viewBox="0 0 200 200"> <defs> <pattern id="grass" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4" > <rect width="100" height="100" fill="#C6FF00"/> <path stroke="#AEEA00" fill="transparent" stroke-linejoin="square" d="m1,5 h1 l1,-1 l1,1 l1,-1 l1,1 h1" /> </pattern> <pattern id="sea" viewBox="0 0 10 10" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse" > <rect width="100" height="100" fill="#4FC3F7"/> <path stroke="#03A9F4" fill="transparent" stroke-linejoin="square" d="m1,1 v5 l4,-2.5 z" > </path> </pattern> <pattern id="concrete" viewBox="0 0 10 5" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="5"> <rect fill="#3E2723" width="10" height="10"/> <ellipse fill="#fff1" cx="4" cy="2" rx="2" ry="1"/> <ellipse fill="#fff1" cx="7" cy="4" rx="1" ry=".6"/> <path stroke="#0003" stroke-width=".2" d="m0,0 l10,5"/> <path stroke="#0003" stroke-width=".2" d="m0,5 l10,-5"/> </pattern> <path id="tile" d="m0 0 l5,-2.5 l5,2.5 l-5,2.5,z"/> <g id="base"> <path stroke="#f000" stroke-width="1" d="m0 0 v5 l5,2.5 l5 -2.5 v-5 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v5 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v5 l-5,2.5 z" /> </g> <path id="side-1" d="m0 0 l5,2.5 v5 l-5,-2.5 z" fill="#0002"/> <path id="side-2" d="m0 0 l5,-2.5 v5 l-5,2.5 z" fill="#0004"/> <pattern id="isometric" width="20" height="10" viewBox="0 0 10 5" patternUnits="userSpaceOnUse" x="0" y="0" > <g stroke="#0004" stroke-dasharray="2 1" stroke-width=".25"> <path d="m0,0 v100"/> <path d="m10,0 v100"/> </g> <path d="m5,0 v100" stroke-width=".25" stroke="#0004" stroke-dasharray=".5"/> <g stroke-width=".25" stroke="#0004"> <path d="m0,0 l10,5"/> <path d="m10,0 l-10,5"/> </g> </pattern> <g id="เสา"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m0 0 v-6 l1.5,1 v6"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m1.5 1 v-6 l1.5,-1 v6"/> <path stroke="#f00" stroke-width="0" fill="#616161" d="m0 -6 l1.5,1 l1.5,-1 l-1.5,-1"/> </g> </defs> <rect fill="url(#sea)" width="1000" height="1000"/> <svg viewBox="0 0 300 300" width="200" height="200"> <g transform="translate(150 100)"> <path fill="url(#grass)" d="m0 25 l150 75 l-150 75 l-150 -75 l150 -75" > </path> </g> <g transform="translate(150 120)"> <path fill="url(#concrete)" d="m0 25 l110 55 l-110 55 l-110 -55 l110 -55" > </path> </g> <rect fill="url(#isometric)" width="1000" height="1000"/> </svg> <svg> <!-- ฐาน --> <g transform="translate(131 133)"> <path stroke="#000" stroke-width="0.1" fill="#607D8B" d="m0 0 v1 l20 10 l20 -10 v-1 l-20 -10 z" > <!-- v =ความสูง, l=แกน x, ไม่มีตัวอักษร=แกน y --> </path> <use href="#เสา" x="0" y="0"/> <use href="#เสา" x="8" y="4"/> <use href="#เสา" x="18.5" y="-9"/> <use href="#เสา" x="18.5" y="9"/> <use href="#เสา" x="37" y="1"/> </g> <g transform="translate(131 126)"> <path stroke="#000" stroke-width="0.1" fill="#EEEEEE" d="m0 0 v3 l20 10 l20 -10 v-3 l-20 -10 z" > <!-- v =ความสูง, l=แกน x, ไม่มีตัวอักษร=แกน y --> </path> </g> <g transform="translate(145 125)"> <path stroke="#000" stroke-width="0.1" fill="#37474F" d="m0 0 v1 l6 3 l6 -3 v-1 l-6 -3 z" > <!-- v =ความสูง, l=แกน x, ไม่มีตัวอักษร=แกน y --> </path> </g> </svg> <!-- หาตำแหน่ง --> <circle cx="100" cy="100" r="0.5"fill="red" /> </svg> </body> </html>