【发布时间】：2016-08-31 10:42:04
【问题描述】：
最近在网上阅读了一个非常有趣的教程后，我能够为 svg 文件制作动画：https://jakearchibald.com/2013/animated-line-drawing-svg/。
现在的问题是我必须切换到另一种类型的svg，我猜是新版本。
到目前为止，我的代码是：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg class="snap" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="47.1 0.2 10.2 9.6" enable-background="new 47.1 0.2 10.2 9.6" xml:space="preserve">
<path id="feat1" stroke="#8dc63f" stroke-width="0.3" stroke-dasharray="" stroke-dashoffset="0.00" fill="none" d="M52.6,9.8c-1.3,0-2.5-0.5-3.4-1.4c-1.9-1.9-1.9-4.9,0-6.8c0.9-0.9,2.1-1.4,3.4-1.4c1.3,0,2.5,0.5,3.4,1.4c1.9,1.9,1.9,4.9,0,6.8C55.1,9.3,53.9,9.8,52.6,9.8z M52.6,0.4c-1.2,0-2.4,0.5-3.2,1.3c-1.8,1.8-1.8,4.7,0,6.5c0.9,0.9,2,1.3,3.2,1.3s2.4-0.5,3.2-1.3l0,0c1.8-1.8,1.8-4.7,0-6.4C54.9,0.9,53.8,0.4,52.6,0.4z M51.4,6.5L51.4,6.5c-0.7-0.1-1.2-0.3-1.5-0.6c-0.6-0.7-0.4-1.9-0.2-2.9c0,0,0-0.1,0.1-0.1c0,0,0.1,0,0.1,0C51,3.4,51.7,4,51.9,4.7c0.2,0.5,0,1.1-0.4,1.8C51.5,6.5,51.4,6.5,51.4,6.5z M49.8,3.1c-0.2,1.1-0.2,2,0.2,2.6c0.3,0.3,0.7,0.5,1.2,0.6c0.3-0.6,0.5-1.1,0.3-1.5C51.5,4.2,50.9,3.7,49.8,3.1z M51.4,6.5c0.1,0,0.1-0.1,0.1-0.1c-0.2-1.2-0.8-2.1-1.2-2.6c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2c0.4,0.4,1,1.3,1.1,2.4C51.3,6.5,51.3,6.5,51.4,6.5C51.4,6.5,51.4,6.5,51.4,6.5z M53,7.4c0,0-0.1,0-0.1-0.1c-0.5-1-0.6-1.8-0.4-2.4c0.3-0.9,1.3-1.6,2.9-2.3c0,0,0.1,0,0.1,0c0,0,0.1,0.1,0.1,0.1c0.1,1.4,0.3,3-0.5,4C54.6,7.1,53.9,7.4,53,7.4L53,7.4z M55.3,2.9C53.8,3.5,53,4.2,52.7,5c-0.2,0.6-0.1,1.3,0.3,2.2c0.8,0,1.4-0.3,1.8-0.7C55.5,5.7,55.5,4.5,55.3,2.9z M53.1,7.3c0.3-1.5,1.1-2.7,1.7-3.3c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0c-0.6,0.6-1.5,1.8-1.8,3.4c0,0.1,0,0.1,0.1,0.2c0,0,0,0,0,0C53,7.4,53.1,7.4,53.1,7.3z" />
</svg>
还有我添加的 javascript sn-p：
$('.snap').eq(0).one("mouseenter", function() {
var path = document.querySelector('.snap path');
path.getTotalLength();
var path = document.querySelector('.snap path');
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition =
'none';
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 2s ease-in-out';
path.style.strokeDashoffset = '0';
});
我使用了eq(0)，因为我使用了多个 svg 文件。
但现在的问题是我必须使用这样的文件：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg class="snap" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #8DC63F;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
</style>
<g>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2988 53.1541)" class="st0" cx="53" cy="53.5" rx="38.1" ry="38.1" />
<g>
<path class="st0" d="M30,37c-2,13.7-3.5,26.8,13.2,28C49.3,55,49.3,46.2,30,37z" />
<path class="st0" d="M33.8,44.6C37,48,41.8,55.4,43.3,65" />
<path class="st0" d="M76.4,34.8c1.8,18.9,2.9,36.9-20.2,37.4C48.7,58.1,49.3,46.1,76.4,34.8z" />
<path class="st0" d="M70.7,45C66,49.4,58.9,59.3,56.2,72.2" />
</g>
</g>
</svg>
我尝试选择路径，但效果仅适用于第一条路径，我使用了querySelectorAll，但收到错误-> getTotalLength()。所以我决定选择<g> 元素，但它仍然不起作用。
有什么建议吗？
更新：
由于性能的原因，我将 svg 内联元素切换为对象元素。我现在正在使用这样的文件代码：
<div class=row>
<p class="col-md-4">
<svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2988 53.1541)" class="st0" cx="53" cy="53.5" rx="38.1" ry="38.1"/>
<g>
<path class="st0" d="M30,37c-2,13.7-3.5,26.8,13.2,28C49.3,55,49.3,46.2,30,37z"/>
<path class="st0" d="M33.8,44.6C37,48,41.8,55.4,43.3,65"/>
<path class="st0" d="M76.4,34.8c1.8,18.9,2.9,36.9-20.2,37.4C48.7,58.1,49.3,46.1,76.4,34.8z"/>
<path class="st0" d="M70.7,45C66,49.4,58.9,59.3,56.2,72.2"/>
</g>
</g>
</svg>
Organic</p>
<p class="col-md-4">
<svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.8051 53.0077)" class="st0" cx="53.1" cy="52.8" rx="38.1" ry="38.1"/>
<g>
<line class="st0" x1="47.3" y1="43.5" x2="53" y2="47.9"/>
<line class="st0" x1="50.8" y1="55.8" x2="57.8" y2="61.1"/>
<line class="st0" x1="39" y1="59.4" x2="43.3" y2="62.8"/>
<path class="st0" d="M65.2,43.2c9,2.7,10-3,9.8-4.1c-0.4-2.4-3.9-3.4-3.9-3.4c3.6-0.6,4-6.4,1.7-8.2c-2.3-1.8-7.9,0-7.5,3.7
c0,0-1.8-3.2-4.3-3c-1.1,0.1-6.4,2.5-1.5,10.5"/>
<line class="st0" x1="62.5" y1="40.7" x2="67" y2="34.9"/>
<path class="st0" d="M62.9,41.1c6.2,4.8,5.5,9.3,2.4,13.2c-3.1,4-19.6,18.9-28.7,23.1c-1.7,0.8-2.7,1.1-3.2,0.7
c-0.5-0.4-0.5-1.5-0.1-3.3c1.8-9.8,12.1-29.5,15.2-33.5c3.1-4,7.2-5.8,13.4-1L62.9,41.1z"/>
</g>
</g>
</svg>
Vegan</p>
<p class="col-md-4">
<svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2783 53.2037)" class="st0" cx="53.1" cy="53.5" rx="38.1" ry="38.1"/>
<polyline class="st0" points="32,48.8 32,35.8 41.6,48.8 41.6,35.8 "/>
<polyline class="st0" points="65.2,48.8 65.2,35.8 74.9,48.8 74.9,35.8 "/>
<polyline class="st0" points="58.2,69.7 58.2,56.7 52.8,64 47.5,56.7 47.5,69.7 "/>
<circle class="st0" cx="53.6" cy="42.3" r="6.5"/>
<circle class="st0" cx="70.7" cy="63.2" r="6.5"/>
<path class="st0" d="M41.1,58.2c-1.1-0.9-2.6-1.5-4.1-1.5c-3.6,0-6.5,2.9-6.5,6.5c0,3.6,2.9,6.5,6.5,6.5c1.6,0,3.1-0.6,4.3-1.6
v-4.6H37"/>
</g>
</svg>
Non-GMO</p>
</div>
<div class=row>
<p class="col-md-4">
<svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<g>
<polygon class="st0" points="44.6,59.7 30.3,56.9 28.8,39.7 43.1,42.5 "/>
<polygon class="st0" points="53.8,35.2 39.5,32.3 28.8,39.7 43.1,42.5 "/>
<polyline class="st0" points="51.5,55 44.6,59.7 43.1,42.5 53.8,35.2 55.1,49.6 "/>
<polygon class="st0" points="61.6,74.7 75.9,71.8 77.4,54.6 63.1,57.5 "/>
<polygon class="st0" points="52.4,50.1 66.7,47.3 77.4,54.6 63.1,57.5 "/>
<polygon class="st0" points="50.9,67.3 61.6,74.7 63.1,57.5 52.4,50.1 "/>
</g>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2783 53.2037)" class="st0" cx="53.1" cy="53.5" rx="38.1" ry="38.1"/>
<line class="st0" x1="42.3" y1="64.2" x2="26.1" y2="80.5"/>
<line class="st0" x1="80" y1="26.5" x2="63.1" y2="43.5"/>
</g>
</svg>
No-added-sugar</p>
<p class="col-md-4">
<svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:none;stroke:#8DC63F;stroke-width:2.1473;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:none;stroke:#8DC63F;stroke-width:2.3038;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.418 53.2791)" class="st0" cx="53.6" cy="52.5" rx="38.1" ry="38.1"/>
<line class="st0" x1="34.8" y1="71.3" x2="26.6" y2="79.5"/>
<line class="st0" x1="80.6" y1="25.5" x2="68.6" y2="37.5"/>
<g>
<path class="st0" d="M53.6,42.4c8.7-6.6,4-14.6,0-17.3C49.7,27.8,44.9,35.9,53.6,42.4z"/>
<path class="st0" d="M54.5,52.9c10.9-0.6,11.4-9.9,9.6-14.3C59.3,38.6,50.9,42.7,54.5,52.9z"/>
<path class="st1" d="M53.8,65.8c11.5-0.2,13.8-10.3,12.8-15.3C61.6,50.3,52,54.4,53.8,65.8z"/>
<path class="st2" d="M53.6,77.5c12.2,1.5,16.3-8.8,15.9-14.2C64.2,62.3,53.4,65.1,53.6,77.5z"/>
<path class="st0" d="M52.8,52.9c-10.9-0.6-11.4-9.9-9.6-14.3C47.9,38.6,56.3,42.7,52.8,52.9z"/>
<path class="st1" d="M53.4,65.8c-11.5-0.2-13.8-10.3-12.8-15.3C45.6,50.3,55.2,54.4,53.4,65.8z"/>
<path class="st2" d="M53.6,77.5C41.4,79,37.3,68.6,37.7,63.2C43,62.3,53.8,65.1,53.6,77.5z"/>
</g>
</g>
</svg>
Gluten-free</p>
<p class="col-md-4">
<svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2783 53.2037)" class="st0" cx="53.1" cy="53.5" rx="38.1" ry="38.1"/>
<line class="st0" x1="39.8" y1="66.8" x2="26.1" y2="80.5"/>
<line class="st0" x1="80" y1="26.5" x2="66.2" y2="40.3"/>
<g>
<path class="st0" d="M66.4,56.3c1.8,1.5,3.2,3.4,4,5.7c2.6,7-1,14.8-8.1,17.4c-7,2.6-14.8-1-17.4-8.1c-0.9-2.4-1-5-0.6-7.4
l-0.1,0.4c0.4-2.3,0.2-4.7-0.6-7c-0.8-2.3-2.2-4.2-4-5.7l0.2,0.2c-1.9-1.5-3.4-3.5-4.3-6c-2.6-7,1-14.8,8.1-17.4s14.8,1,17.4,8.1
c0.9,2.4,1,4.9,0.6,7.3l0-0.3c-0.4,2.2-0.2,4.6,0.6,6.9C63.2,52.8,64.7,54.8,66.4,56.3L66.4,56.3z"/>
<path class="st0" d="M44.2,37.4c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/>
<path class="st0" d="M49.3,59.8c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/>
<path class="st0" d="M59.3,62.7c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/>
<path class="st0" d="M50.2,68.9c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/>
<path class="st0" d="M61.6,71.5c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/>
<path class="st0" d="M50.8,42.4c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/>
<path class="st0" d="M43.8,49.3c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/>
<path class="st0" d="M53.7,51.1c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/>
</g>
</g>
</svg>
Nut-free</p>
</div>
</div>
我添加了一个实际工作的代码，但我无法使用 jQuery 的每个函数迭代所有图像（我尝试了一些东西，但它们没有工作）。另外，我无法与不同于路径元素的其他元素进行交互，也无法将它们转换为路径元素。
到目前为止，我的代码是：
$('.snap').eq(0).one("mouseenter", function() {
var path_all = document.querySelectorAll('.snap path');
$.each(path_all, function(key, path) {
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition =
'none';
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 2s ease-in-out';
path.style.strokeDashoffset = '0';
});
});
$('.snap').eq(1).one("mouseenter", function() {
var path_all = document.querySelectorAll('.snap path');
$.each(path_all, function(key, path) {
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition =
'none';
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 2s ease-in-out';
path.style.strokeDashoffset = '0';
});
});
$('.snap').eq(2).one("mouseenter", function() {
var path_all = document.querySelectorAll('.snap path');
$.each(path_all, function(key, path) {
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition =
'none';
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 2s ease-in-out';
path.style.strokeDashoffset = '0';
});
});
$('.snap').eq(3).one("mouseenter", function() {
var path_all = document.querySelectorAll('.snap path');
$.each(path_all, function(key, path) {
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition =
'none';
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 2s ease-in-out';
path.style.strokeDashoffset = '0';
});
});
关于如何处理这个问题有什么建议吗？
【问题讨论】：
标签： javascript animation svg path