将 SVG 效果应用于 HTML 内容
现代浏览器支持在 CSS 样式中使用 SVG 来将图形效果应用于 HTML 内容。
您可以在样式中指定 SVG，无论是同一文档内的还是外部样式表中的。您可以使用 3 个属性：mask、clip-path 和 filter。
注意： 外部文件中的 SVG 引用必须与引用文档具有相同的源。
使用嵌入式 SVG
要使用 CSS 样式应用 SVG 效果，您首先需要创建引用要应用的 SVG 的 CSS 样式。
p {
mask: url("#my-mask");
}
在上面的示例中，所有段落都通过带有 ID my-mask 的 SVG <mask> 进行遮罩。
示例：遮罩
例如，您可以使用类似以下的代码，在 HTML 文档中，通过 SVG 和 CSS 创建一个用于 HTML 内容的渐变遮罩。
<svg height="0">
<mask id="mask-1">
<linearGradient id="gradient-1" y2="1">
<stop stop-color="white" offset="0" />
<stop stop-opacity="0" offset="1" />
</linearGradient>
<circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white" />
<rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)" />
</mask>
</svg>
.target {
mask: url("#mask-1");
}
p {
width: 300px;
border: 1px solid black;
display: inline-block;
}
p.target {
background: lime;
}
请注意，在 CSS 中，遮罩是通过 URL 指向 ID #mask-1 来指定的，该 ID 是其下方指定的 SVG 遮罩的 ID。其余部分则详细说明了渐变遮罩本身。
通过将上面定义的 target 类分配给一个元素来完成将 SVG 效果应用于 HTML 的操作，如下所示：
<p class="target">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
<em class="target"
>elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</em
>
Ut enim ad minim veniam.
</p>
上面的示例将被渲染并应用遮罩。
示例：裁剪
此示例演示了如何使用 SVG 来裁剪 HTML 内容。请注意，即使是链接的可点击区域也会被裁剪。
<p class="target">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
<em class="target"
>elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</em
>
Ut enim ad minim veniam.
</p>
<button>Toggle radius</button>
<svg height="0">
<clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
<circle cx="0.25" cy="0.25" r="0.25" id="circle" />
<rect x="0.5" y="0.2" width="0.5" height="0.8" />
</clipPath>
</svg>
.target {
clip-path: url("#clipping-path-1");
}
p {
width: 300px;
border: 1px solid black;
display: inline-block;
}
p.target {
background: lime;
}
这会创建一个由圆形和矩形组成的裁剪区域，为其分配 ID #clipping-path-1，然后在 CSS 中引用它。裁剪路径可以分配给任何具有 target 类的元素。
您可以实时更改 SVG 并立即看到它们对 HTML 渲染的影响。例如，您可以调整上面建立的裁剪路径中的圆形大小。
const circle = document.getElementById("circle");
function toggleRadius() {
circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
}
document.querySelector("button").addEventListener("click", toggleRadius);
示例：滤镜
这演示了如何将滤镜应用于 HTML 内容，使用的是 SVG。它建立了几个滤镜，这些滤镜通过 CSS 应用于普通状态和鼠标悬停状态下的三个元素。
<p class="target">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<pre class="target">lorem</pre>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
<em class="target"
>elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</em
>
Ut enim ad minim veniam.
</p>
任何 SVG 滤镜都可以这样应用。例如，要应用模糊效果，您可以使用：
<svg height="0">
<filter id="f1">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
您也可以应用颜色矩阵。
<svg height="0">
<filter id="f2">
<feColorMatrix
values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>
</svg>
以及更多滤镜。
<svg height="0">
<filter id="f3">
<feConvolveMatrix
filterRes="100 100"
color-interpolation-filters="sRGB"
order="3"
kernelMatrix="0 -1 0
-1 4 -1
0 -1 0"
preserveAlpha="true" />
</filter>
<filter id="f4">
<feSpecularLighting
surfaceScale="5"
specularConstant="1"
specularExponent="10"
lighting-color="white">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
</filter>
<filter id="f5">
<feColorMatrix
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 1 0 0 0"
color-interpolation-filters="sRGB" />
</filter>
</svg>
这五个滤镜是通过以下 CSS 应用的：
p.target {
filter: url("#f3");
}
p.target:hover {
filter: url("#f5");
}
em.target {
filter: url("#f1");
}
em.target:hover {
filter: url("#f4");
}
pre.target {
filter: url("#f2");
}
pre.target:hover {
filter: url("#f3");
}
示例：模糊文本
为了模糊文本，有一个 CSS 滤镜函数称为 blur()。您可以使用 SVG 滤镜达到相同的效果。
<p class="blur">Time to clean my glasses</p>
<svg height="0">
<defs>
<filter id="wherearemyglasses" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
</defs>
</svg>
您可以在同一个类中应用 SVG 和 CSS 滤镜。
.blur {
filter: url("#wherearemyglasses");
}
模糊是计算密集型的，因此请确保谨慎使用它，尤其是在需要滚动或动画的元素中。
示例：文本效果
与纯 HTML 文本相比，SVG 效果还可以用于为文本添加更动态和灵活的添加方式。
通过结合使用 SVG 元素和 HTML 创建文本，您可以实现各种不同的文本效果。您可以旋转文本。
<svg height="60" width="200">
<text x="0" y="15" fill="blue" transform="rotate(30 20,50)">
Example text
</text>
</svg>
使用外部引用
用于裁剪、遮罩和滤镜的 SVG 可以从外部源加载，只要该源与应用它的 HTML 文档来自同一源。
例如，如果您的 CSS 在一个名为 default.css 的文件中，它可以看起来像这样：
.target {
clip-path: url("resources.svg#c1");
}
然后，SVG 通过使用 ID 为 c1 的裁剪路径，从一个名为 resources.svg 的文件中导入。
另见
- SVG
clip-path属性mask属性- 裁剪和遮罩中的形状——以及如何使用它们