65.9K
CodeProject 正在变化。 阅读更多。
Home

项目中的 SVG 滤镜和交互性

用户-12149082
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2016 年 3 月 25 日

CPOL

3分钟阅读

viewsIcon

9304

有用的 SVG 滤镜和交互性的描述。

引言

可缩放矢量图形 (SVG) 是一种基于 XML 的矢量图像格式，用于二维图形，支持交互性和动画。 可能不是所有人都知道 SVG 格式已经存在了 15 年以上，第一个 SVG 规范出现在 1999 年。 但最近随着大量高分辨率设备出现，SVG 的广泛使用才开始普及。

另外，如今世界上几乎 80% 的人口拥有移动设备，45% 的互联网流量来自智能手机和平板电脑。 因此，大多数开发人员都遵循“移动优先”原则。

“移动优先”是 Luke Wroblewski 创建的一种理念，强调在创建用户体验时需要优先考虑移动环境。

您可以在这里阅读更多相关信息.

SVG 是创建响应式设计的最佳方法。 矢量格式允许您为任何设备（移动设备、平板电脑或桌面设备）使用一个图像。 SVG 的另一个优点是文件大小小。 如果 eBay 和 Amazon 将页面加载速度提高 9%，他们就会损失 1% 的利润。 使用 SVG，您将不再需要担心缩放图像以及缩小各种设备尺寸的问题。

为什么需要 SVG？

  • 文件大小小，压缩效果好
  • 缩放到任何大小都不会损失质量（非常小的尺寸除外）
  • 在 Retina 显示屏上看起来不错
  • 过滤器和交互性提供的其他机会

如果您仍然没有使用它，我将证明 SVG 非常易于使用。 在本教程中，我想讨论如何轻松地将精彩的绘图动画效果添加到您的项目中。

如何在您的项目中使用 SVG？

  1. 作为图像元素

    <img src="some.svg" alt="SVG is awesome">

  2. 作为 CSS 中的背景图像

         <a href="/" class="logo">
        Your logo
    </a>

    .logo {
      background: url(your-logo.svg);
      background-size: 130px 70px;

  3. 直接在 HTML 标记中

    <body>
   <!-- Insert SVG code here and you will get an image -->
</body>

    或

    <?php include("some.svg"); ?>

  4. 作为对象元素

    <object type="image/svg+xml" data="some.svg" class="logo"></object>

如今，几乎 97% 的浏览器都支持 SVG，除了较低版本的 IE8 和 Android 2.3。 前两种使用方式不允许通过 CSS 更改 SVG。 最后一种使用 <object> 的方式具有更好的浏览器支持，但是如果您想使用 CSS 进行更改，则必须将 <style> 标签直接放入包含的 SVG 文件中。 这种方式的另一个优点是，与直接插入 HTML 相比，对象元素可以被浏览器缓存。

SVG 过滤器和交互性

<!--CODEPEN IFAME-->
http://codepen.io/anon/pen/JGewOd

让我们从为我们的实验选择一些图标开始。 我推荐使用出色的 Flaticon 资源来查找您需要的所有内容。

在您做出选择并下载图标后，您应该在 HTML 中包含 SVG 图像。 因为我们将与之交互，所以它必须作为 svg 元素放置，而不是作为 img 标签的 src 属性中的图像路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <svg id="logo" height="300" 
   xmlns="http://www.w3.org/2000/svg" x="0px" 
   y="0px" viewBox="0 0 404.7 354" 
   enable-background="new 0 0 404.7 354">
       <path d="M 10,110 L 10,10 L 40,50 L 70,10 L 100,50 L 130,
       10 L 130,110 z" fill="red" 
       stroke="orange" stroke-width="5"/>
    </svg>           
</body>
</html>

接下来，我们将使用 path 元素。 它只是一条线，其属性 d 指定了按 x 轴和 y 轴的点坐标，这些坐标用逗号分隔。 您还可以看到 fill、stroke、stroke-width 属性，这正是我们可以使用 CSS 更改的内容。

svg path {
 stroke-width: 3;
 stroke: #cc0000;
 fill: #fff;
}

最后一步是启用强大的 Vivus.js 库，它将完成所有绘图动画过程。 您只需要包含 vivus.min.js 并创建一个新的 Vivus 类

  // logo is id of svg element
  new Vivus('logo', {
        type: 'delayed',
        duration: 300,
        animTimingFunction: Vivus.EASE
  });

Vivus 支持五种类型的动画 (delayed, async, oneByOne, script, scenario 或 scenario-sync)、一些缓动函数以及大量的方法和选项，可帮助您设置您想要的所有内容。

您可以在项目的官方页面上查看更多示例，或者亲自尝试一下。

可以在 http://it-blog.qarea.com/tag/html5/ 找到更多信息。

© . All rights reserved.