タグ

SVGに関するswfzのブックマーク (2)

  • SVG Viewer

    <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 124 124" fill="none"> <rect width="124" height="124" rx="24" fill="#F97316"/> <path d="M19.375 36.7818V100.625C19.375 102.834 21.1659 104.625 23.375 104.625H87.2181C90.7818 104.625 92.5664 100.316 90.0466 97.7966L26.2034 33.9534C23.6836 31.4336 19.375 33.2182 19.375 36.7818Z" fill="white"/> <circle cx="63.2109" cy="37.53

    SVG Viewer
  • SVGのフィルター効果

    SVGには、要素にフィルター効果を与えるための特別な要素が用意されています。CSSのfilterプロパティよりも豊富なフィルターが再現できるから魅力的なんですよねー。けれど、パッと見ごちゃごちゃしてて分かり難(にく)いし、手順とか手続きがあって、なんだかとっつき難そう…。そんな「SVGのフィルター効果」について、個人的なまとめです:)。 SVGのフィルター効果のための要素 SVGはXMLに基づくマークアップ言語なので、フィルターを適用する方法も、XMLのタグ要素として用意されていて、フィルター効果のための要素は、下記ページの「Filter primitive elements」と「Light source elements」という項目にまとまっています。 SVG 要素リファレンス - SVG: スケーラブルベクターグラフィック | MDN すべてfeという接頭辞(プレフィックス)(filt

    SVGのフィルター効果
  • 1