D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
katsumitakano
Full window
Github gist
三次ベジェ曲線
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ width: 960px; height: 500px; } </style> </head> <body> <svg width="960" height="500"> <g transform="translate(10,10)"> <path stroke="black" fill="none" d=" M 0,0 C 250,100 100,300 300,300 "></path> <!-- 以下は付加情報 --> <circle cx="0" cy="0" r="5" fill="black"></circle> <text x="0" y="0" dx="10" dy="10" fill="red">M0, 0</text> <circle cx="250" cy="100" r="10" fill="blue"></circle> <text x="250" y="100" dx="10" dy="10" fill="red">C250, 100</text> <circle cx="100" cy="300" r="10" fill="blue"></circle> <text x="100" y="300" dx="10" dy="10" fill="red">100, 300</text> <circle cx="300" cy="300" r="5" fill="black"></circle> <text x="300" y="300" dx="10" dy="10" fill="red">300, 300</text> <line x1="0" y1="0" x2="250" y2="100" stroke="black" stroke-dasharray="5 5" opacity="0.2"></line> <line x1="100" y1="300" x2="300" y2="300" stroke="black" stroke-dasharray="5 5" opacity="0.2"></line> </g> </svg> </body> </html>