Applying SVG effects to HTML content
注意:在外部文件引入的SVG必须与原始文件?同源。
使用内嵌SVG
要想在CSS样式中应用SVG效果，首先需要创建一个引用SVG的CSS样式。
<style>p { mask: url(?developer/section/1424165/); }</style>在上面的例子中, 所有段落会被ID?为my-mask的SVG?<mask>遮罩.
例子: Masking
例如，你可以在你的HTML文档中用SVG和CSS代码对HTML内容作渐变mask效果。
<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(?developer/section/1424165/);
}
p {
width: 300px;
border: 1px solid #000;
display: inline-block;
}请注意，在CSS中，使用指向ID的URL指定掩码，该ID ?developer/section/1424165/是在其下面指定的SVG掩码的ID。其他一切都指定了渐变蒙版本身的细节。
将SVG效果应用于（X）HTML是通过将target以上定义的类分配给元素来完成的，如下所示：
<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
<b class="target">elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</b>
Ut enim ad minim veniam.
</p>上面的例子将被应用到它的掩码。
例子: Clipping
此示例演示如何使用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
<b class="target">elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</b>
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(?developer/section/1424165/);
}
p {
width: 300px;
border: 1px solid #000;
display: inline-block;
}建立一个由圆形和矩形组成的裁剪区域，为其分配ID ?developer/section/1424165/，然后在CSS中引用。剪辑路径可以分配给任何具有target类的元素。
您可以实时更改SVG，并立即看到它们是如何影响HTML的呈现。例如，您可以调整上面建立的剪辑路径中的圆圈大小：
function toggleRadius() {
var circle = document.getElementById("circle");
? circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
}例子：Filtering
这演示了如何使用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
<b class="target">elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</b>
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(?developer/section/1424165/); }
p.target:hover { filter:url(?developer/section/1424165/); }
b.target { filter:url(?developer/section/1424165/); }
b.target:hover { filter:url(?developer/section/1424165/); }
pre.target { filter:url(?developer/section/1424165/); }
pre.target:hover { filter:url(?developer/section/1424165/); }例子: Blurred Text
为了模糊文本，基于Webkit的浏览器有一个名为blur的（前缀）CSS过滤器（另请参阅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(?developer/section/1424165/); }模糊是计算繁重的，所以要保证使用它，特别是在滚动或动画元素的时候。
使用外部参考
用于剪切，屏蔽和过滤的SVG可以从外部源加载，只要该源来自与其应用的HTML文档来源相同。
例如，如果您的CSS位于一个名为的文件中default.css，它可以如下所示：
.target { clip-path: url(?developer/section/1424165/resources.svg); }resources.svg使用带有ID的剪辑路径从名为的文件导入SVG c1。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
