SVG Isometric Grid (Branch 6990)
✨ นายอธิชาติ ชูศรี
<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 100"> <defs> <pattern id="isometric" width="10" height="5" 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-10 l2.5,1.25 v10"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m2.5 1.25 v-10 l2.5,-1.25 v10"/> <path stroke="#f00" stroke-width="0" fill="#616161" d="m0 -10 l2.5,1.25 l2.5,-1.25 l-2.5,-1.25"/> </g> <!--กำแพง--> <g id="base"> <path stroke="#f000" stroke-width="1" d="m0 0 v50 l5,2.5 l5 -2.5 v-50 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v50 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v50 l-5,2.5 z" /> </g> <!--กำแพง--> <g id="test"> <path stroke="#f000" stroke-width="1" d="m0,0 v30 l10,5 l10,-5 v-30 l-10,-5 z"></path> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l10,5 v30 l-10,-5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m10 5 l10,-5 v30 l-10,5 z" /> </g> <!--กำแพงสูง--> <g id="high"> <path stroke="#f000" stroke-width="1" d="m0,0 v15 l10,5 l10,-5 v-15 l-10,-5 z"></path> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l10,5 v15 l-10,-5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m10 5 l10,-5 v15 l-10,5 z" /> </g> <!--กำแพงยาว--> <g id="long"> <path stroke="#f000" stroke-width="1" d="m0,0 v30 l-20,10 l-10,-5 v-30 l20,-10z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-20,10 v30 l20,-10 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-20 10 l-10,-5 v30 l10,5 z" /> </g> <!--เหลี่ยม--> <g id="third"> <path stroke="#f000" stroke-width="1" d="m0,0 v15 l-20,10 l-10,-5 v-15 l20,-10z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-20,10 v15 l20,-10 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-20 10 l-10,-5 v15 l10,5 z" /> </g> <!--ฟ้าๆ--> <g id="fa"> <path stroke="#f000" stroke-width="1" d="m0,0 v10 l-30,15 l-15,-7.5 v-10 l30,-15z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-30,15 v10 l30,-15 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-30 15 l-15,-7.5 v10 l15,7.5 z" /> </g> </defs> <!-- code here --> <svg viewBox="0 0 300 300" width="200" height="200"> <!--สร้างกำแพง--> <svg> <g fill="#EEEEEE" transform="scale(1)"> <use href="#long" x="45" y=57.5></use> <use href="#high" x="25" y=67.5></use> <use href="#high" x="35" y=72.5></use> <use href="#long" x="95" y=62.5></use> <use href="#third" x="75" y=72.5></use> </g> </svg> <svg> <g fill="#EEEEEE" transform="scale(1)"> <use href="#test" x="75" y=32.5 fill="#EEEEEE"></use> <use href="#long" x="130" y=50></use> <use href="#base" x="90" y=45></use> <use href="#base" x="95" y=47.5></use> <use href="#base" x="100" y=50></use> <use href="#base" x="105" y=52.5></use> <use href="#fa" x="75" y=47.5 fill="blue"></use> <use href="#fa" x="85" y=52.5 fill="blue"></use> <!path fill="#263238" d="m20,50 l40,-20 l35,17 l-40,20 z"/> <!path fill="#263238" d="m60,30 l10,-5 l45,22.5 l-10,6z"/> </g> </svg> <rect fill="url(#isometric)" width="1000" height="1000"/> </svg> </svg> </body> </html>