在 HTML 内容中应用 SVG 效果 - SVG 编辑

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

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

使用内嵌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中 遮罩（mask） 使用一个指向 ID 为 #mask-1的URL，这个ID是在上面的SVG中指定的。 SVG中其他的内容指定了渐变遮罩的细节。

将SVG效果应用于 (X)HTML 是通过将 target 这个class应用于其他元素来实现的，如下所示：

<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 class的任何元素。

你可以实时地对SVG进行更改，并看到它们立即影响HTML的渲染。例如，可以在上面建立的剪切路径中调整圆形的大小：

function toggleRadius() {
  var circle = document.getElementById("circle");
  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
}

例子: Filtering

这个例子演示了如何使用SVG对HTML内容进行过滤。它建立了几个过滤器，这些过滤器与CSS一起作用于正常和鼠标悬停状态 hover 下的三个元素。

<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 filter）。你可以使用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>

你可以在同一个class中使用SVG和CSS过滤器：

.blur { filter: url(#wherearemyglasses); }

模糊的计算量很大，所以请谨慎使用它，尤其是在包含滚动或动画的元素中。

例子: Text Effects

SVG 还可以用于添加比纯HTML文本更动态、更灵活的文本添加方法。

通过使用SVG元素与HTML结合创建文本，你可以产生不同的文本的效果。如旋转文本：

<svg height="60" width="200">
  <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">Example text</text>
</svg>

使用外部引用

用来clipping，masking，filtering的SVG可以从其他外部源载入，只要外部源是与要使用SVG的该HTML文档同源的。

例如，CSS规则在一个名为default.css的文件中，如下这样：

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

这个SVG就可以从一个名为resources.svg的文件中导入，clip路径为ID c1。

参见

• SVG
• SVG Effects for HTML Content (blog post)
• SVG External Document References (blog post) ([archive.org] Web Tech Blog » Blog Archive » SVG External Document References)