我创建了基于Linea SVG图标集的小代码段。我想让svg图标在其笔画路径上设置动画,如Vivus SVG。
如果您希望能够操作SVG而不必将其内联到HTML中,那么我们如何使用对象<object>
几乎是最好的选择。
<object type="image/svg+xml" data="basic_compass.svg"></object>
这是我的HTML
@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;