SVG Path Arcs (Branch 7567)
✨ นายปณิธาน คงทอง
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; color:white; } svg{ background:#eee; } </style> </head> <body> <svg viewBox="0 0 100 100"> <path fill="#0000" stroke="deeppink" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d=" m50,30 a1,1 0 1,0 0,20 l0 -10 l0 -10 " > <animate attributeName="d" values=" m50,30 a1,1 0 1,0 0,20 l0 -10 l0 -10; m50,30 a1,1 0 1,0 0,20 l5 -10 l-4 -10; m50,30 a1,1 0 1,0 0,20 l0 -10 l0 -10; " dur="1.2s" repeatCount="indefinite" /> --> </path> <path fill="#0000" stroke="deeppink" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d=" m50,40 h-15 " > <animate attributeName="d" values=" m50,40 h-15; m53,40 h-15; m5,38.4 h-15; " dur="1.2s" repeatCount="indefinite" /> --> </path> <!-- Grid --> <defs> <pattern id="grid" viewBox="0,0,10,10" width="1%" height="1%"> <rect fill="#0001" width="1" height="10" x="1" y="0"/> <rect fill="#0001" width="1" height="10" x="3" y="0"/> <rect fill="#0001" width="1" height="10" x="5" y="0"/> <rect fill="#0001" width="1" height="10" x="7" y="0"/> <rect fill="#0001" width="1" height="10" x="9" y="0"/> <rect fill="#0001" width="10" height="1" x="0" y="1"/> <rect fill="#0001" width="10" height="1" x="0" y="3"/> <rect fill="#0001" width="10" height="1" x="0" y="5"/> <rect fill="#0001" width="10" height="1" x="0" y="7"/> <rect fill="#0001" width="10" height="1" x="0" y="9"/> <path d="M0 0 h10 L9 1 h-8 v8 L0 10 z" fill="#ff05"/> <path d="M10 10 h-10 L1 9 h8 v-8 L10 0 z" fill="#0f05"/> <rect fill="#0002" width="10" height=".1" x="0" y="9.9"/> <rect fill="#0002" width="10" height=".1" x="0" y="0"/> <rect fill="#0002" height="10" width=".1" y="0" x="9.9"/> <rect fill="#0002" height="10" width=".1" y="0" x="0"/> </pattern> </defs> <rect fill="url(#grid)" width="1000" height="1000" x="0" y="0" style="opacity:.5"/> </svg> <h5> อันนี้ลองเปลี่ยนบรรทัด 82 คู่ที่ 3 เป็น 0,0 0,1 1,0 1,1 ดูค่า </h5> <svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"> <path d="M 10 315 L 110 215 A 36,60 0 1,1 150.71,170.29 L 172.55 152.45 A 30,50 -45 0,1 215.1,109.9 L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> <circle cx="150.71" cy="170.29" r="2" fill="red"/> <circle cx="110" cy="215" r="2" fill="red"/> <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/> <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/> </svg> </body> </html>