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中文网其他相关文章！