非常教程

SVG参考手册

其他 | Miscellaneous

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

其他 | Miscellaneous相关

SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。