在你的项目中,SVG过滤和交互

分享于 

5分钟阅读

Web开发

  繁體 雙語

介绍

可以缩放矢量图形( SVG ) 是基于xml的二维图形矢量图像格式,支持交互和动画。 并非所有的人都知道SVG格式存在 15年上,第一个SVG规范出现在 1999中。 但是,最近接收到的SVG广泛地使用了大量高分辨率设备。

今天,从智能手机和平板电脑来看,世界上几乎 80%个人拥有移动设备和 45%个网络流量。 因此,大多数开发人员都遵循移动第一规则。

when是由 Luke Wroblewski创建的一个哲学,强调了在创建用户体验时需要优先优先级的。

,你可以在这里读更多关于它的信息,。

SVG是创建响应式设计的最佳方法。 矢量格式允许你为任何设备使用一个图像: 移动。平板电脑或者桌面。另一种好的SVG是小文件大小。 如果你增加eBay和亚马逊网页加载速度 9%,那么他们就会失去利润的1%。 使用 SVG,你将忘记缩放图像和减小任何类型设备的尺寸问题。

你为什么需要 SVG?

  • 小型文件大小和良好压缩
  • 在不损失质量的情况下缩放任何尺寸( 非常小的尺寸除外)
  • 在 Retina 显示器上看起来不错
  • 提供过滤器和交互性的附加机会

如果你仍然不使用它,我将证明SVG是非常简单的使用。 在本教程中,我希望讨论如何轻松地将出色的绘图动画效果添加到项目中。

如何在项目中使用 SVG?

作为图像元素:

<imgsrc="some.svg"alt="SVG is awesome">

作为CSS中的background 图像:

<ahref="/"class="logo"> Your logo</a>.logo {
 background: url(your-logo.svg);
 background-size: 130px 70px;

直接在HTML标记中:

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

或者:

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

作为对象元素:

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

现在,几乎所有浏览器都支持 SVG,而不是低成本的IE8和的Android。 使用do的前两种情况不允许通过CSS更改 SVG。 使用 <object>的最后一个例子是更好的浏览器支持,但如果要对CSS进行更改,则必须直接将 <style> 标记。 这种方式的另一个机会是,浏览器可以缓存对象元素而不是直接插入 HTML。

SVG过滤器和交互性

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

让我们从为我们的实验选择一些 icon 开始。 我推荐 awesome Flaticon 资源来找到你所有的需求。

选择并下载 icon 之后,应该在HTML中包含SVG图像。 因为我们将与它交互,它必须作为 svg 元素,而不是 img 标记 src 属性中的路径作为路径。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><svgid="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"><pathd="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 指定点的坐标,以为单位,y 轴为磅,以逗号表示。 你也可以看到 fillstrokestroke-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支持五种动画( delayedasynconeByOnescriptscenario 或者 scenario-sync ),少数松动功能和很多方法和选项,帮助你设置所需的全部。

你可以在项目的官方页面上看到更多的例子,或者自己尝试。

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


INT  proj  SVG  filters  Svg过滤器  
相关文章