0
Kürzlich konnte ich eine SVG-Datei animieren, nachdem ich ein sehr interessantes Tutorial online gelesen: https://jakearchibald.com/2013/animated-line-drawing-svg/.Wie animiert man eine neue SVG-Datei mit einem Pfad mit <g> Element
Das Problem ist jetzt, dass ich zu einer anderen Art von Svg wechseln muss, ich denke, die neue Version.
Bisher ist mein Code:
<?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>
Und die JavaScript-Snippet, dass ich hinzugefügt:
$('.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';
});
ich eq(0) verwendet, weil ich mehr als eine svg-Datei.
Aber jetzt das Problem ist, dass ich mit einer Datei wie folgt arbeiten:
<?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>
Ich habe versucht, den Weg zu wählen, aber der Effekt funktioniert nur auf dem ersten Weg, habe ich querySelectorAll, aber Ich erhalte einen Fehler -> getTotalLength(). Also entscheide ich mich, das <g> Element auszuwählen, aber es funktioniert sowieso nicht.
Irgendwelche Vorschläge?
UPDATE:
I auf ein SVG-Inline-Element mit einem Objektelement geschaltet aufgrund der Tatsache der Leistung. Ich arbeite jetzt mit einem Datei Code wie folgt aus:
<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>
Und ich einen Code hinzugefügt, das tatsächlich funktioniert, aber ich war nicht in der Lage alle das Bild mit der jede Funktion von jQuery iterieren (I paar Dinge ausprobiert, aber sie haben nicht funktioniert). Außerdem konnte ich nicht mit den anderen Elementen interagieren, die sich vom Pfadelement unterscheiden. Ich konnte sie auch nicht in das Pfadelement konvertieren.
Bisher ist mein Code:
$('.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';
});
});
Jeder Vorschlag, wie dieses Thema zu nähern?
ps: Wenn Sie die '
Mann, du bist großartig, vielen Dank! –
Das einzige Problem ist, dass ich versucht habe, diesen Effekt zu einer Reihe von Bildern hinzuzufügen. Ich werde das Detail auf meine Antwort erklären: –