东莞网站定制:使用CSS和JavaScript创建SVG动画

2019.08.16 mf_web

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保存为SVG

要将Adobe Illustrator文件导出为SVG,只需转到文件 - > 另存为,然后输入要导出的SVG格式的所需名称。在这个例子中,我将使用“ plant ”,并为类型格式选择  SVG。

保存SVG

接下来,将出现SVG选项窗口; 确保在配置文件下选择版本SVG 1.1,然后在图像位置选择链接单选按钮。对于CSS属性,请选择“ 样式元素”。如果要查看SVG代码,只需单击底部的“ 显示SVG代码 ”按钮即可。要完成导出过程,只需单击“ 确定 ”按钮即可。

显示svg代码

在HTML中使用SVG

如上所述的SVG是基于XML的文件,某些浏览器允许您在HTML上插入SVG图像。有不同的方法可以在HTML文档中包含SVG。

1.在HTML文档中插入完整的SVG XML代码

这是在HTML文档上插入SVG图像的最快方法。在<svg>标记内复制并粘贴SVG XML代码。如果您要插入多个SVG图像,这可能会让您感到有些困惑,特别是如果您刚开始使用的话。请参阅以下示例:

1
2
3
4
5
6
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>

2.使用图像标签

在HTML文档中包含SVG的另一种方法是使用<img>标记通过src属性。这与在HTML标记上导入普通图像格式的过程相同。但是,它有时不起作用,很难通过CSS进行操作。看看下面的例子:

1
&amp;lt;img src=&amp;quot;images/text-svg.svg&amp;quot; alt=&amp;quot;text svg&amp;quot;&amp;gt;

3.使用object标签

这是导入SVG图像的首选方法。使用<object>标记和<embed>,它在不同的浏览器上以矢量格式呈现图像。对于本教程的其余部分,我们将使用此方法将我们的SVG包含在HTML文档中。请参阅下面的示例。

1
2
3
&amp;lt;object&amp;gt;
    &amp;lt;embed src=&amp;quot;images/text-svg.svg&amp;quot;&amp;gt;
&amp;lt;/object&amp;gt;

注意:尽管CSS和JavaScript可以通过内联和内部样式属性用于SVG动画,但并不保证所有浏览器都支持它,特别是在IE9或更低版本上。

SVG图标悬停动画

对于本教程的这一部分,我创建了三个我们将要使用的SVG平面图标。我们需要做的第一件事是将它们插入我们的HTML文档<embed>标记,然后将它们包装在<object> 标记中。

1
2
3
4
5
6
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
5
6
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动画是关于绘制文本SVG。该text.svg文件包含单词“ SVG TEXT ”盒中。所以基本上我们在这里要实现的是,我们将使边框以短划线形式旋转,然后在绘制文本之前添加动画延迟。

我们仍然在这里使用<object>和   <embed>标签将我们的SVG文件插入到我们的HTML文档中。

1
2
3
&amp;lt;object&amp;gt;
  &amp;lt;embed src=&amp;quot;images/text-svg.svg&amp;quot;&amp;gt;
&amp;lt;/object&amp;gt;

对于我们的CSS,我们将使用stroke-dasharray和stroke-dashoffset来创建平滑的线条绘制效果。Stroke-dasharray属性基本上设置了破折号流并用于描边路径,而stroke-dashoffset确定破折号之间的距离。

我们将使用CSS3 @keyframes来获得此效果,然后为st1类设置动画延迟,这是文本svg本身的实际类。

1
2
3
4
5
6
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;
}

使用CSS和JavaScript的SVG矢量动画

在本教程的最后一部分中,我创建了两个向量元素。第一个是花瓶,第二个是植物图像。目标是实现动画,以便当我们将鼠标悬停在花瓶上时,植物将生长在基本元素的顶部。

使用<object>标签,我们在这里有两个元素:vase.svg和plant.svg。您将在下面注意到,我使用data属性来指定SVG的路径而不是src 。稍后我们的JavaScript代码将使用此数据属性来获得我们想要的效果。我们还将所有内容都包装在一个id 容器中,然后将plant.svg的一个id为plantobj和vaseobj id作为vase.svg。

1
2
3
4
5
6
&amp;lt;div id=&amp;quot;container&amp;quot; style=&amp;quot;margin: 0px auto; display: block; width: 300px; height: 350px&amp;quot;&amp;gt;
&amp;lt;object data=&amp;quot;images/plant.svg&amp;quot; id=&amp;quot;plantobj&amp;quot; type=&amp;quot;image/svg+xml&amp;quot;&amp;gt;
&amp;lt;/object&amp;gt;
&amp;lt;object data=&amp;quot;images/vase.svg&amp;quot; id=&amp;quot;vaseobj&amp;quot; type=&amp;quot;image/svg+xml&amp;quot;&amp;gt;
&amp;lt;/object&amp;gt;
&amp;lt;/div&amp;gt;

现在对于CSS,我们需要将id容器设置为position和relative,并为其指定特定的高度和宽度。

1
2
3
4
5
6
7
#container {
      position: relative;
      margin: 0px auto;
      display: block;
      width: 300px;
      height: 350px
    }

接下来,让我们在vaseobj和plantobj上添加样式。基本上,我们将在这里添加的样式是我们元素的位置设置。然后在我们的植物元素上,我们将设置一个缩放的CSS3变换属性,然后添加一些过渡以创建平滑效果。

1
2
3
4
5
6
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
5
6
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
5
6
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 = &amp;quot;grow&amp;quot;;
  };
  vaseobj.onmouseout = function() {
    plantobj.className = &amp;quot;&amp;quot;;
  }
};

更多提示

虽然我们可以使用<object>和<embed>标签将SVG图像包含到我们的HTML文档中,但开发人员Alexey Ten介绍了一些关于如何使用向量并为SVG的栅格化版本提供后退的技巧。这意味着使用<svg>标签我们可以同时使用href和src属性。看看下面的例子。

1
2
3
&amp;lt;svg width=&amp;quot;300&amp;quot; height=&amp;quot;300&amp;quot;&amp;gt;
    &amp;lt;image xlink:href=&amp;quot;images/icon-magnifying-glass.svg&amp;quot; src=&amp;quot;images/icon-magnifying-glass.png&amp;quot; width=&amp;quot;300&amp;quot; height=&amp;quot;300&amp;quot;/&amp;gt;
&amp;lt;/svg&amp;gt;

包起来

SVG是将XML图形放到网上的最佳方式之一,它可以使您的HTML文档更小,更快,更具交互性。

就是这样!希望您在本教程中学到了一些东西。

东莞网站定制

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP