CSS内のSVG

CSSインラインSVGフィルター：強力な画像処理のヒント

Stefan Judisによる「今日学んだ」（TIL）（TIL）記事は、CSSでSVGフィルターをインライン化する方法を説明しています。 CSSのfilter属性は、 grayscale(100%)などのいくつかの組み込み関数をサポートしていますが、SVGによって定義されたフィルターを指すこともできます。フィルターがインラインで定義されている場合filter: url(#my-custom-filter)を使用できます<svg></svg>要素で、<filter></filter>要素の一部。この方法では、HTMLへの参照が必要です。これは少し不器用です。フィルターは、CSSに統合するためにより論理的な視覚効果です。例は次のとおりです。

 img {
  フィルター：url（ 'data：image/svg xml、\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter color-interpolation-filters="linearRGB" filterunits="objectBoundingBox" height="140%" primitiveunits="userSpaceOnUse" width="140%" x="-20%" y="-20%"> \
        <feturbulence basefrequency="0.01 0.01" numoctaves="1" result="turbulence" seed="1" stitchtiles="noStitch" type="turbulence"></feturbulence> \
        <fedisplacementmap in="SourceGraphic" in2="turbulence" result="displacementMap" scale="20" xchannelselector="G" ychannelselector="A"></fedisplacementmap> \
      </filter>\
    </svg>#Waves '）
  ;
}

これは、CSSだけでは不可能なStefanの乱流フィルターの例です。

多数のバックスラッシュ（ \ ）に注意してください。これにより、CSSがテンプレートリテラルもサポートできることを期待しています。同時に、コードのフォーマットツールまたは圧縮ツールがこれらのバックスラッシュを処理するかどうかについても関係していますが、実際には、これは問題を引き起こすことはありません。

ありがたいことに、SVGコードは、優れた読みやすさと編集可能性を維持しています。したがって、SVGフィルターをCSSと実験で直接編集できます。

同じことがYokselのツールにも当てはまります。 2色と3色の画像のエディターは非常にクールです。これらのフィルターをCSSに直接適用することもできます。

ただし、CSSにインラードされたSVGはフィルターに限定されません。 SVG図面を直接CSSに埋め込むこともできます。

この方法は、最新のブラウザで正常に機能します（Safariを除く）。しかし、近い将来、SVGの特殊文字をさらにエンコードする必要があります（Base64エンコーディングは必要ありませんが）。 YoskelのURLエンコーダーはこれのために設計されていますが、今でも必要かどうかはわかりません。

以上がCSS内のSVGの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。