更新日2018/10/10SVG:形を作るための6要素#SVG形自体は自分でコーディングしなくてもIllustratorなどの作成ツールを使えばいい。基礎を知らないとコードをいじれないので、どの要素が何の役目をしているかを理解しておく必要がある。ここでは形を作るSVGの要素をまとめる。fill="blue"stroke="#fff"stroke-width="1"></circle></svg><circle>:円形の生成のための要素cx属性とcy属性:位置を示すためのもの。ry="25"fill="blue"stroke="#fff"stroke-width="2"/><ellipse>:楕円形の生成cx属性とcy属性:位置を示すためのもの。rx属性とry属性:楕円形の横幅と縦幅。y2="30%"stroke="red"stroke-width="10"/><line>:棒線の生成x1属性とy1属性:位置を示すためのもの。x2属性とy2属性:位置を示すためのもの。/><rect>:長方形の生成x属性とy属性:位置を示すためのもの。width属性とheight属性:長方形の横幅と縦幅。最後にCodePenをのせておく。CodePen.こちらの記事もどうぞSVGのグラデーション系の要素についてはこちら。SVG:グラデーション系の要素https://a.uotomizu.com/articles/svg-gradient-elements/SVGのグラデーション系の3つの要素についてまとめた。Illustratorなどの専用のツールを使えば良いので、覚える必要は...SVGの<animateMotion>要素についてはこちら。SVG:animateMotion要素の使い方https://a.uotomizu.com/articles/svg-how-to-use-animatemotion-element/SVGの<animateMotion>要素の使い方をまとめた。フォローお願い致します。2018/10/16RSSCONTACTフィードバック・お仕事のご依頼はコンタクトフォームよりお願いいたします。