现代浏览器支持在 CSS 样式中使用 SVG 来对HTML内容应用图像效果。
你可以在同一文件中使用SVG样式，也可以通过外部样式表引入。共有三个属性： mask, clip-path, 和 filter。
使用内嵌SVG
要想在CSS样式中应用SVG效果，首先需要创建一个引用SVG的CSS样式。
<style>p { mask: url(#my-mask); }</style>
In the above example, all paragraphs are masked by an SVG with the ID my-mask.
Example: Masking
For example, you can make a gradient mask for HTML content using SVG and CSS code similar to the following, inside your HTML document:
.target {
mask: url(#mask-1);
}
p {
width: 300px;
border: 1px solid #000;
display: inline-block;
}
Note that in the CSS, the mask is specified using a URL to the ID #mask-1, which is the ID of the SVG mask specified below it. Everything else specifies details about the gradient mask itself.
Applying the SVG effect to (X)HTML is accomplished by assigning the target class defined above to an element, like this:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
The above example would be rendered with the mask applied to it.
Example: Clipping
This example demonstrates using SVG to clip HTML content. Notice that even the clickable areas for links are clipped.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Toggle radius
.target {
clip-path: url(#clipping-path-1);
}
p {
width: 300px;
border: 1px solid #000;
display: inline-block;
}
This establishes a clipping area made of a circle and rectangle, assigns it the ID #clipping-path-1, then references it in the CSS. The clip path can be assigned to any element with the target class.
You can make changes to the SVG in real time and see them immediately affect the rendering of the HTML. For example, you can resize the circle in the clip path established above:
function toggleRadius() {
var circle = document.getElementById("circle");
circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
}
Example: Filtering
This demonstrates applying a filter to HTML content using SVG. It establishes several filters, which are applied with CSS to three elements in both the normal and mouse hover states.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Any SVG filter can be applied this way. For example, to apply a blur effect, you might use:
You could also apply a color matrix:
And some more filters:
The five filters are applied using the following CSS:
p.target { filter:url(#f3); }
p.target:hover { filter:url(#f5); }
b.target { filter:url(#f1); }
b.target:hover { filter:url(#f4); }
pre.target { filter:url(#f2); }
pre.target:hover { filter:url(#f3); }
Example: Blurred Text
In order to blur text, Webkit based browsers have a (prefixed) CSS filter called blur (see also CSS filter). You can achieve the same effect using SVG filters.
Time to clean my glasses
You can apply the SVG and the CSS filter in the same class:
.blur { filter: url(#wherearemyglasses); }
Blurring is computation heavy, so ensure to use it sparingly, especially in elements that get scrolled or animated.
Using external references
SVG used for clipping, masking, and filtering can be loaded from an external source, as long as that source comes from the same origin as the HTML document to which it's applied.
For example, if your CSS is in a file named default.css, it can look like this:
.target { clip-path: url(resources.svg#c1); }
The SVG is then imported from a file named resources.svg, using the clip path with the ID c1.
See also