185
VG或可缩放矢量图形是XML的一种应用程序,以轻量级形式提供矢量图形信息。与其他光栅化图像格式(如PNG和JPEG)不同,SVG可以在不损失图像质量的情况下进行缩放。
东莞网站定制可以使用Adobe Illustrator和其他图形编辑软件设计创建SVG图形,也可以使用XML / SVG DOM标记和设置手动创建SVG图形以创建元素,形状或路径。
虽然这些是XML图形,但可以在它们上放置一些动画,这些动画可以用许多不同的方式实现,例如CSS,JavaScript和SMIL(同步多媒体集成语言)。
在今天的教程中,我将向您展示如何使用CSS和JavaScript使用图标,文本和矢量图形来动画SVG。
将Adobe Illustrator文件导出为SVG
将图像导出为SVG格式的最佳方法之一是使用Adobe Illustrator。我已经创建了我们将在本教程中使用的最终SVG图标,文本和插图画家。
保存为SVG
要将Adobe Illustrator文件导出为SVG,只需转到文件 - > 另存为,然后输入要导出的SVG格式的所需名称。在这个例子中,我将使用“ plant ”,并为类型格式选择 SVG。
接下来,将出现SVG选项窗口; 确保在配置文件下选择版本SVG 1.1,然后在图像位置选择链接单选按钮。对于CSS属性,请选择“ 样式元素”。如果要查看SVG代码,只需单击底部的“ 显示SVG代码 ”按钮即可。要完成导出过程,只需单击“ 确定 ”按钮即可。
如上所述的SVG是基于XML的文件,某些浏览器允许您在HTML上插入SVG图像。有不同的方法可以在HTML文档中包含SVG。
这是在HTML文档上插入SVG图像的最快方法。在<svg>标记内复制并粘贴SVG XML代码。如果您要插入多个SVG图像,这可能会让您感到有些困惑,特别是如果您刚开始使用的话。请参阅以下示例:
1 2 3 4 56 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="icon"> <style type="text/css"> .st0 { fill:none; stroke:#F2F2F2; stroke-width:4; stroke-miterlimit:10; } .icon .st0 { -webkit-transition: .5s; -moz-transition: .5s; transition: .5s; } .icon .fill { -webkit-transition: .5s; -moz-transition: .5s; transition: .5s; fill: #ffffff; } .icon:hover { cursor: pointer; } .icon:hover .st0 { stroke: #1f8a4c; } .icon:hover .fill { -webkit-transform: scale(893, 893); -moz-transform: scale(893, 893); transform: scale(893, 893); } </style> <g id="fill" transform="translate(101,99)"> <circle class="fill" r="0.1" /> </g> <g id="container"> <circle class="st0" cx="101" cy="99" r="89.333" /> </g> <g id="icon-details"> <path class="st0" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806 l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z" /> <circle class="st0" cx="77.843" cy="72.434" r="33.331" /> <circle class="st0" cx="77.844" cy="72.434" r="22.343" /> </g> </svg> |
在HTML文档中包含SVG的另一种方法是使用<img>标记通过src属性。这与在HTML标记上导入普通图像格式的过程相同。但是,它有时不起作用,很难通过CSS进行操作。看看下面的例子:
1 | &lt;img src=&quot;images/text-svg.svg&quot; alt=&quot;text svg&quot;&gt; |
这是导入SVG图像的首选方法。使用<object>标记和<embed>,它在不同的浏览器上以矢量格式呈现图像。对于本教程的其余部分,我们将使用此方法将我们的SVG包含在HTML文档中。请参阅下面的示例。
1 2 3 | &lt;object&gt; &lt;embed src=&quot;images/text-svg.svg&quot;&gt; &lt;/object&gt; |
注意:尽管CSS和JavaScript可以通过内联和内部样式属性用于SVG动画,但并不保证所有浏览器都支持它,特别是在IE9或更低版本上。
对于本教程的这一部分,我创建了三个我们将要使用的SVG平面图标。我们需要做的第一件事是将它们插入我们的HTML文档<embed>标记,然后将它们包装在<object> 标记中。
1 2 3 4 56 7 8 9 10 11 12 13 14 15 16 17 | <ul> <li> <object> <embed src="images/icon-magnifying-glass.svg"> </object> </li> <li> <object> <embed src="images/icon-list.svg"> </object> </li> <li> <object> <embed src="images/icon-envelope.svg"> </object> </li> </ul> |
现在是CSS的时候了,我们将在那里操纵SVG的悬停效果。为此,我们将通过内部CSS在每个SVG图像类上应用CSS。
1 2 3 4 56 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .st0 { fill:none; stroke:#F2F2F2; stroke-width:4; stroke-miterlimit:10; } .icon .st0 { -webkit-transition: .5s; -moz-transition: .5s; transition: .5s; } .icon .fill { -webkit-transition: .5s; -moz-transition: .5s; transition: .5s; fill: #ffffff; } .icon:hover { cursor: pointer; } .icon:hover .st0 { stroke: #1f8a4c; } .icon:hover .fill { -webkit-transform: scale(893, 893); -moz-transform: scale(893, 893); transform: scale(893, 893); } |
在导出这些SVG图标时,使用Adobe Illustrator提供的默认SVG类,我们将添加CSS3 过渡属性以创建平滑的填充效果。该填充属性是相同的背景颜色 CSS,而行程属性是一样的边框颜色。要创建弹出悬停效果,我们将使用CSS3变换比例并操纵填充的行为。
我们将看到的下一个SVG动画是关于绘制文本SVG。该text.svg文件包含单词“ SVG TEXT ”盒中。所以基本上我们在这里要实现的是,我们将使边框以短划线形式旋转,然后在绘制文本之前添加动画延迟。
我们仍然在这里使用<object>和 <embed>标签将我们的SVG文件插入到我们的HTML文档中。
1 2 3 | &lt;object&gt; &lt;embed src=&quot;images/text-svg.svg&quot;&gt; &lt;/object&gt; |
对于我们的CSS,我们将使用stroke-dasharray和stroke-dashoffset来创建平滑的线条绘制效果。Stroke-dasharray属性基本上设置了破折号流并用于描边路径,而stroke-dashoffset确定破折号之间的距离。
我们将使用CSS3 @keyframes来获得此效果,然后为st1类设置动画延迟,这是文本svg本身的实际类。
1 2 3 4 56 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | .st0 { font-family:'Lato-Light' } .st1 { font-size:181.2018px } .st2 { display:none } .st3 { fill:none; stroke:#FFF; stroke-width:3; stroke-miterlimit:10 } .st0 { stroke-dasharray:800; stroke-dashoffset:0; -webkit-animation:dash 2s linear forwards; -moz-animation:dash 2s linear forwards; animation:dash 2s linear forwards; opacity:0 } @-webkit-keyframes dash { from { stroke-dashoffset:800; } to { stroke-dashoffset:1; opacity:1; } } @-moz-keyframes dash { from { stroke-dashoffset:800; } to { stroke-dashoffset:1; opacity:1; } } @keyframes dash { from { stroke-dashoffset:800; } to { stroke-dashoffset:1; opacity:1; } } .st1 { stroke-dasharray:800; stroke-dashoffset:0; -webkit-animation:dash 2s linear forwards; -moz-animation:dash 2s linear forwards; animation:dash 2s linear forwards; -webkit-animation-delay:1.6s; -moz-animation-delay:1.6s; animation-delay:1.6s; } #container { stroke-dasharray:50; stroke-dashoffset:0; -webkit-animation:dash 1.5s linear forwards; -moz-animation:dash 1.5s linear forwards; animation:dash 1.5s linear forwards; } |
在本教程的最后一部分中,我创建了两个向量元素。第一个是花瓶,第二个是植物图像。目标是实现动画,以便当我们将鼠标悬停在花瓶上时,植物将生长在基本元素的顶部。
使用<object>标签,我们在这里有两个元素:vase.svg和plant.svg。您将在下面注意到,我使用data属性来指定SVG的路径而不是src 。稍后我们的JavaScript代码将使用此数据属性来获得我们想要的效果。我们还将所有内容都包装在一个id 容器中,然后将plant.svg的一个id为plantobj和vaseobj id作为vase.svg。
1 2 3 4 56 | &lt;div id=&quot;container&quot; style=&quot;margin: 0px auto; display: block; width: 300px; height: 350px&quot;&gt; &lt;object data=&quot;images/plant.svg&quot; id=&quot;plantobj&quot; type=&quot;image/svg+xml&quot;&gt; &lt;/object&gt; &lt;object data=&quot;images/vase.svg&quot; id=&quot;vaseobj&quot; type=&quot;image/svg+xml&quot;&gt; &lt;/object&gt; &lt;/div&gt; |
现在对于CSS,我们需要将id容器设置为position和relative,并为其指定特定的高度和宽度。
1 2 3 4 56 7 | #container { position: relative; margin: 0px auto; display: block; width: 300px; height: 350px } |
接下来,让我们在vaseobj和plantobj上添加样式。基本上,我们将在这里添加的样式是我们元素的位置设置。然后在我们的植物元素上,我们将设置一个缩放的CSS3变换属性,然后添加一些过渡以创建平滑效果。
1 2 3 4 56 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #vaseobj { position: absolute; bottom: 20px; left: 70px; } #plantobj { position: absolute; bottom: 127px; left: 130px; -moz-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); -moz-transform-origin: 20%, 100%; -webkit-transform-origin: 20% 100%; transform-origin: 20% 100%; -moz-transition: all 1.5s ease; -webkit-transition: all 1.5s ease; transition: all 1.5s ease; } |
然后,我们将为我们的增长类添加CSS,即在x轴和y轴上以200%的比例缩放元素。这将在我们的JavaScript代码后面有意义。
1 2 3 4 5 | #plantobj.grow { -moz-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2); } |
最后,让我们使用JavaScript为我们的向量元素添加一些魔力来创建增长效果。首先,我们将创建一个函数来捕获SVG文档。这也将测试它是否返回由框架文档生成的文档对象,否则该值将为null。这也将确保我们可以在悬停在花瓶元素上时创建光标指针。
1 2 3 4 56 7 8 9 10 11 12 | function getSubDocument(embedding_element) { if (embedding_element.contentDocument) { return embedding_element.contentDocument; } else { var subdoc = null; try { subdoc = embedding_element.getSVGDocument(); } catch(e) {} return subdoc; } } |
现在让我们添加多汁的部分。使用window.onload事件,我们将在不同的变量上分配我们的id。然后使用onmouseover和onmouseout,我们将类增长添加到植物元素以创建平滑的生长效果。
1 2 3 4 56 7 8 9 10 11 12 13 14 | window.onload = function () { var vaseobj = document.getElementById('vaseobj'); var vasedoc = getSubDocument(vaseobj); var vs = vasedoc.getElementById('vase'); vs.style.cursor = 'pointer'; var plantobj = document.getElementById('plantobj'); vaseobj.onmouseover = function() { plantobj.className = &quot;grow&quot;; }; vaseobj.onmouseout = function() { plantobj.className = &quot;&quot;; } }; |
虽然我们可以使用<object>和<embed>标签将SVG图像包含到我们的HTML文档中,但开发人员Alexey Ten介绍了一些关于如何使用向量并为SVG的栅格化版本提供后退的技巧。这意味着使用<svg>标签我们可以同时使用href和src属性。看看下面的例子。
1 2 3 | &lt;svg width=&quot;300&quot; height=&quot;300&quot;&gt; &lt;image xlink:href=&quot;images/icon-magnifying-glass.svg&quot; src=&quot;images/icon-magnifying-glass.png&quot; width=&quot;300&quot; height=&quot;300&quot;/&gt; &lt;/svg&gt; |
SVG是将XML图形放到网上的最佳方式之一,它可以使您的HTML文档更小,更快,更具交互性。
就是这样!希望您在本教程中学到了一些东西。
东莞网站定制
热门分享
最新文章
2019.10.25
东莞企业网站开发:GoogleAdWords针对特定的投资提供可靠流量
2019.10.12
东莞做网站:一个网站需要多少页呢?
2019.10.12
东莞高端网站建设:自由职业技巧来构建你的客户基础
2019.09.11
东莞手机网站建设:螺旋桨框架结合引导&谷歌材料设计
2019.08.23
东莞公司网站设计:用户体验设计和GDPR你需要知道的一切
2019.08.16
东莞企业网站建设:用户体验研究在产品开发中的价值
2019.08.16
东莞网站设计:在WordPress主题中使页脚响应
2019.08.16
东莞高端建站:时间感知如何影响交互设计
2019.08.16
东莞网站制作:如何聘请网页设计师或设计公司
2019.08.16
东莞网站定制:使用CSS和JavaScript创建SVG动画
随机推荐
2019.08.16
东莞网站制作:如何聘请网页设计师或设计公司
2019.08.13
东莞网站制作:如何了解您的用户
2019.08.14
东莞网站优化:11个电子邮件通讯设计技巧提升点击次数和参与度
2019.08.13
东莞高端建站:将Flash游戏转换为HTML5时需要了解的内容?
2019.08.12
东莞企业网站建设:成为A / B测试专家的路线图
2019.08.13
东莞网页设计:CSS自定义属性的策略指南
2019.08.14
东莞企业网站开发:如何在营销中创造紧迫感以促进转换
2019.08.09
东莞网站建设:如何在WordPress中构建多语言网站
2019.08.15
东莞网站优化:什么是SEO优化?
2019.10.12
东莞高端网站建设:自由职业技巧来构建你的客户基础