記事に更新日を表示する方法です。読者の方にいつ更新したのか分かるようにするため、更新日を表示するようにしました。今までは、記事を更新しても分からない状態でした。 参考サイトで紹介しているコードを使わせて頂きました。CSSは当ブログに合うように…

とあるSVGを自分のPCで表示したかったのですが、SCSSを使っていたのでそのままでは表示されませんでした。SCSSをCSSに変換する必要があるということなので、Sassについて調べました。この記事では、Sassについて調べた内容と始め方について簡単に書きます。 …

SVGは、ブラウザで表示して使うことを想定しています。今までの勉強で静止画(ロゴなど)は、問題なく扱えるようになったと思います。ここからは一歩踏み込んで、JavaScriptを含むSVGをHTMLに読み込ませる方法を勉強しました。 実現したいこと 現状 サンプルの…

素材サイトからダウンロードしたSVGの素材を再利用することを考えます。再利用できて、なおかつスタイルも適用できるように考えました。詳しくは、コードをご覧ください。 サンプルコードの紹介 symbol要素でひな形の定義 コード HTMLからの参照 コード デモ…

複数の図形が書かれているのに、1つのpath要素で構成しているSVGファイルがある場合があります。この状態ですと個別にスタイルを指定できません。そこで、path要素を分割します。 サンプルデータ(SVG) path要素を分割する 個別にスタイルを適用する スタイル…

SVGで図形をまとめて扱いたい場合がでてくると思います。そのようなときは、要素をグループにまとめます。関連する要素は、g要素、symbol要素、use要素、defs要素の4つです。これらについて見ていきます。 g要素 symbol要素 use要素 defs要素 参考サイト g要…

SVGでできる簡単なサンプルを書きます。今回は、クリッピングとイベントを組み合わせます。参考サイトで紹介しているSVGのサンプルを簡単に解説して、それを元に自分でも作ってみます。 X-ray meの簡易的な解説 クリッピングのサンプル コード デモ クリッピ…

SVGのクリッピングについて書きます。クリッピングは、切り抜きのことです。要素の一部分を切り抜きます。切り抜かれた部分は表示され、その他の部分は表示されません。切り抜く形は、色々と指定できます。 クリッピングパスの定義 クリッピングパスの適用 …