在 HTML 内容中应用 SVG 效果

现代浏览器支持在 CSS 样式中使用 SVG 来对HTML内容应用图像效果。

你可以在同一文件中使用SVG样式,也可以通过外部样式表引入。有三个属性可以使用: mask, clip-path, 和 filter

注意: 在外部文件引入的SVG必须与原始文件 同源

使用内嵌SVG

要想在CSS样式中应用SVG效果,首先需要创建一个引用SVG的CSS样式。

<style>p { mask: url(#my-mask); }</style>

在上面的例子中, 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:

<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;
}

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:

 

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.

 

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); }

View this example live

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

 

文档标签和贡献者

 此页面的贡献者: Kylexii, swingcat, SphinxKnight, fanxiaojie
 最后编辑者: Kylexii,