将 SVG 特效应用于 HTML 内容
现代浏览器支持在 SVG 中使用 CSS 样式来为 HTML 内容应用图形效果。
您可以在同一文档或外部样式表中指定样式中的 SVG。您可以使用 3 个属性:mask
、clip-path
和 filter
。
注意:对外部文件中 SVG 的引用必须与引用文档具有相同的 源。
使用嵌入式 SVG
要使用 CSS 样式应用 SVG 效果,您首先需要创建引用要应用的 SVG 的 CSS 样式。
<style>
p {
mask: url(#my-mask);
}
</style>
在上面的示例中,所有段落都由具有 ID my-mask
的 SVG <mask>
蒙版。
示例:蒙版
例如,您可以使用 SVG 和类似于以下内容的 CSS 代码为 HTML 内容创建渐变蒙版,在您的 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 #000;
display: inline-block;
}
请注意,在 CSS 中,蒙版是使用指向 ID #mask-1
的 URL 指定的,该 ID 是在其下方指定的 SVG 蒙版的 ID。其他所有内容都指定有关渐变蒙版本身的详细信息。
通过将上面定义的 target
类分配给元素(如下所示)来完成将 SVG 效果应用于 HTML。
<p class="target" style="background:lime;">
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>
上面的示例将呈现应用了蒙版的 HTML 内容。
示例:剪裁
此示例演示如何使用 SVG 剪裁 HTML 内容。请注意,即使链接的可点击区域也被剪裁了。
<p class="target" style="background:lime;">
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 onclick="toggleRadius()">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 #000;
display: inline-block;
}
这建立了一个由圆形和矩形组成的剪裁区域,为其分配了 ID #clipping-path-1
,然后在 CSS 中引用它。剪裁路径可以分配给具有 target
类的任何元素。
您可以实时更改 SVG 并立即看到它们对 HTML 呈现的影响。例如,您可以调整上面建立的剪裁路径中圆形的尺寸
function toggleRadius() {
const circle = document.getElementById("circle");
circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
}
示例:过滤
这演示了如何使用 SVG 对 HTML 内容应用滤镜。它建立了几个滤镜,这些滤镜使用 CSS 应用于三个元素,包括正常状态和鼠标 悬停 状态。
<p class="target" style="background: lime;">
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"
style="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"
style="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);
}
示例:模糊文本
为了模糊文本,有一个名为 blur()
的 CSS 滤镜函数。您可以使用 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 从名为 resources.svg
的文件导入,使用 ID 为 c1
的剪裁路径。
另请参阅
- SVG
clip-path
属性mask
属性- 剪裁和蒙版中的形状——以及如何使用它们