SVG アイコンの表示に mask-image CSS プロパティを使用する
SVG アイコンの表示に mask-image CSS プロパティを使用する 2024.06.15 mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。 HTML でロゴやアイコンを表示する時、SVG はよく使われるフォーマットです。SVG はベクター形式で記述されるため、拡大・縮小しても画質が劣化しないという特徴があります。SVG を HTML で表示する場合、以下のような方法が使われていました。 <img> 要素の src 属性に SVG ファイルのパスを指定する <svg> 要素を直接記述する svg スプライトを使用する それぞれの方法にはメリット・デメリットが存在
SVG、ボタンのon/offを表現。
こんにちは、「ふ」です。 今回はSVGを使ったweb用のボタンを作成し、簡単なJavaScriptを使ってon/offの状態を切り替える、というものを実装してみましょう。 「on」と「off」で、テキストとボタンの色を反転させるようにしたいと思います。 CSSで実装されているボタン、というものはよく見かけますが。 今回あえてSVGとJsでwebボタンを作るメリットとしては、 の2点が挙げられます。 CSSでborderなどを駆使してボタンを作るのは結構大変💧ですよね。 一方SVGの場合。イラレやVectornatorなどの描画ソフトを使って、自由にデザインすることができます。 またJavaScriptを使うことによって、ユーザが起こすイベントに対しての制御も、とても簡単なコードで実装することができます。 最近ではドロー系のCGソフトも、「SVG書き出し」への対応が順次勧められています。
SVGを使って地図の一部をリンクさせたり色を変えたりする
高山市 多治見市 恵那市 美濃加茂市 土岐市 可児市 海津市 輪之内町 揖斐川町 大野町
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
