RSS

  

RSS

プログラム


SVGで円弧で囲われた図形

  • いわいまさか
  • at 2019/11/06 14:21:30

SVGという描画方式がある。

SVGでは円弧で囲われた図形というのが、書ける。
もちろん、直線で囲われた図形も書ける。
なんなら、囲う曲線としてベジェとかも使える。

参考のドキュメントはここ
https://www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands

例えば、
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="
M 300,100
A 220,220 0 0,1 100,100
A 220,220 0 0,1 100,300
A 220,220 0 0,0 300,300
A 220,220 0 0,0 300,100
z
"
                fill="yellow"
stroke="blue" stroke-width="5" />
</svg>
ならば、下記のようになる。

うまく、HTMLに埋め込めなかった。
ファイルはこちら。
arc.svg

絵的にはこんな感じ



  • コメント (0)
  • トラックバック (0)
トラックバックURL :
http://www.iwai-masaka.jp/tb.cgi/56494

コメントを書く