东莞网站定制：使用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文档更小，更快，更具交互性。

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

东莞网站定制

相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监
TOP