CSS內的SVG

CSS內聯SVG濾鏡：一種強大的圖像處理技巧

Stefan Judis 的一篇“今天我學到了”（TIL）文章解釋瞭如何在CSS 中內聯SVG 濾鏡。 CSS 的filter屬性支持一些內置函數，例如grayscale(100%)等。但它也可以指向由SVG 定義的濾鏡。你可以使用filter: url(#my-custom-filter) ，其中濾鏡定義在內聯的<svg></svg>元素中，作為<filter></filter>元素的一部分。這種方法需要引用HTML，略顯笨拙。濾鏡是一種視覺效果，將其整合到CSS 中更符合邏輯。示例如下：

 img {
  filter: 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')
  ;
}

這是Stefan 的湍流濾鏡示例，這是CSS 單獨無法實現的。

請注意大量的反斜杠( \ )。這讓人不禁希望CSS 也能支持模板字面量。同時，也讓人擔心代碼格式化工具或壓縮工具是否會處理這些反斜杠，但實際上，這可能不會造成問題。

值得慶幸的是，SVG 代碼保持了良好的可讀性和可編輯性。因此，你可以直接在CSS 中編輯SVG 濾鏡並進行實驗。

這同樣適用於Yoksel 的工具。其用於雙色和三色圖像的編輯器非常酷炫。你也可以將這些濾鏡直接應用到CSS 中。

然而，內聯到CSS 中的SVG 不僅僅限於濾鏡。你也可以將SVG 繪圖直接嵌入CSS。

這種方法在現代瀏覽器（除了Safari）中都能正常工作。但在不久的過去，我們需要對SVG 中的特殊字符進行更多編碼才能使其生效（儘管不需要使用base64 編碼）。 Yoskel 的URL 編碼器就是為此而設計的，但我不知道現在是否還有必要。

以上是CSS內的SVG的詳細內容。更多資訊請關注PHP中文網其他相關文章！