nayucolonyスマートフォン用の表示で見るnayucolony勉強したこととかこの広告は、90日以上更新していないブログに表示しています。2017-06-04SVGを触ってみる【path要素/d属性/直線/ベジェ曲線】SVGのことを実は全く知らないので少し調べてみた。簡単なパスを引いて図形をつくる。基本事項としてsvg要素が存在し、子要素としてpath要素を作る。path要素にd属性を指定することでパスを引いていく。パスの内側を塗りつぶす時はfill属性を使用する。始点を決めたら、あとは座標をどかどかうっていくと直線をどんどん引いていける。Mで始点の座標を決定し、L以降に指定した座標に直線を引いていく。以下の例では、0,0を支店に、順番に320,0=>320,160=>0,160と線を引いた場合。0,0のように始点までの直線を指定しなくても、最後の座標から自動的に始点にまでのパスを引いてクローズドパスになる。fill="#3F51B5"></path></svg>座標は書いた順番にパスが惹かれていくので、入れ替えると見た目は変わる。曲線を引く場合はQを使う。曲線はベジ絵曲線で、クアドラティックベジエとキュービックベジエの二種類がある。Qだと「クアドラティックベジエ」が惹かれる。名前が違えば当然処理も違うが、詳しいことはまだ調べきれていない。0,160が曲線になる。fill="#3F51B5"></path></svg>注意この図形描画は、svg要素がその直線を引くのに必要なだけの領域を確保できていることが前提となる。160pxを必要とする。fill="#3F51B5"></path></svg>すると、こうなる。path要素はちゃんと描画領域を確保しているものの、svgが領域を確保していないためにクロップされている、と表現するのが正しそう。2017にスピーカーとして参加しました。月別アーカイブはてなブログをはじめよう!nayucolonyさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。