Applying SVG effects to HTML content

Applying SVG effects to HTML content

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

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

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

使用内嵌SVG

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

<style>p { mask: url(#my-mask }</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(#mask-1 
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
}

请注意，在CSS中，使用指向ID的URL指定掩码，该ID #mask-1是在其下面指定的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(#clipping-path-1
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
}

建立一个由圆形和矩形组成的裁剪区域，为其分配ID #clipping-path-1，然后在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(#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

例子: 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(#wherearemyglasses }

模糊是计算繁重的，所以要保证使用它，特别是在滚动或动画元素的时候。

使用外部参考

用于剪切，屏蔽和过滤的SVG可以从外部源加载，只要该源来自与其应用的HTML文档来源相同。

例如，如果您的CSS位于一个名为的文件中default.css，它可以如下所示：

.target { clip-path: url(resources.svg#c1 }

resources.svg使用带有ID的剪辑路径从名为的文件导入SVG c1。