Question

我创建了基于Linea SVG图标集的小代码段。我想让svg图标在其笔画路径上设置动画，如Vivus SVG。

如果您希望能够操作SVG而不必将其内联到HTML中，那么我们如何使用对象<object>几乎是最好的选择。

<object type="image/svg+xml" data="basic_compass.svg"></object>

这是我的HTML

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic);

.container {
    max-width: 1200px !important;
    margin: 100px 0;
}

.container {
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
}

.col_third { 
    width: 32%;
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
    text-align:center;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }

h5 {font-size:18px; font-weight: normal; font-family: "Montserrat";}
p{font-size: 14px; line-height:24px;font-family: "Noto Serif";}

.svg-icon-holder {
	height: 64px;
	overflow: hidden;
	min-width: 1px;
	margin-bottom: 20px;
	display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col_third">
    <div class="svg-icon-holder" data-animation-delay="400" data-animation="true" data-animation-speed="65" data-size="80"><object type="image/svg+xml" data="http://linea.io/_assets/_svgs/_basic/basic_paperplane.svg"></object></div>
    <h5>Service Style</h5>
    <p><span style="color: #666;">Ut elit tellus, luctus nec magna mattis et, pulvinar dapibus lorem leo ultricies et vitae enim.</span></p>
  </div>
  <div class="col_third">
    <div class="svg-icon-holder" data-animation-delay="200" data-animation="true" data-animation-speed="150" data-size="80"><object type="image/svg+xml" data="http://linea.io/_assets/_svgs/_basic/basic_compass.svg"></object></div>
    <h5>Service Style</h5>
    <p><span style="color: #666;">Ut elit tellus, luctus nec magna mattis et, pulvinar dapibus lorem leo ultricies et vitae enim.</span></p>
  </div>
  <div class="col_third end">
    <div class="svg-icon-holder" data-animation-delay="300" data-animation="true" data-animation-speed="200" data-size="80"><object type="image/svg+xml" data="http://linea.io/_assets/_svgs/_software/software_transform_bezier.svg" ></object></div>
    <h5>Service Style</h5>
    <p><span style="color: #666;">Ut elit tellus, luctus nec magna mattis et, pulvinar dapibus lorem leo ultricies et vitae enim.</span></p>
  </div>
</div>

＆＃13;

动画SVG就像使用jQuery绘制它一样

0 个答案: