Я делаю карту, куда я хочу поместить svgs с этим эффектом рисования. Я нашел очень хороший инструмент, который делает это для меня, я загружаю любой svg из интернета, и он дает эффект для меня и дает мне код для использования на моей странице.
Он отлично работает, но когда я ставлюболее одного svg на странице, первый перестает работать. Это работает, только если я использую только одну SVG.
Я делаю что-то не так? Есть ли инструмент, который также делает это?
Обратите внимание, что на первой карте svg больше нет.
https://pastebin.com/DhR8kfGU
<div class="card d-xl-flex text-center d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="casa" x="0px" y="0px" viewBox="0 0 58.365 58.365" style="enable-background:new 0 0 58.365 58.365;" xml:space="preserve" width="512px" height="512px" class="lazy-line-painter" data-llp-composed="true">
<g>
<path d="M57.863,26.632L29.182,0L0.502,26.632c-0.404,0.376-0.428,1.009-0.052,1.414c0.374,0.404,1.009,0.427,1.413,0.052 l3.319-3.082v33.349h16h16h16V25.015l3.319,3.082c0.192,0.179,0.437,0.267,0.681,0.267c0.269,0,0.536-0.107,0.732-0.319 C58.291,27.641,58.267,27.008,57.863,26.632z M23.182,56.365v-16c0-3.309,2.691-6,6-6s6,2.691,6,6v16H23.182z M51.182,56.365h-14 v-16c0-4.411-3.589-8-8-8s-8,3.589-8,8v16h-14V23.158l22-20.429l22,20.429V56.365z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="casa-0" data-llp-duration="2000" data-llp-delay="0" fill-opacity="0" style="" />
</g>
</svg>
<p class="text-center d-flex flex-column m-xl-3 title">
Residencial
</p>
<p class="card-information">Gás para sua casa</p>
<p class="m-1 card-information">P 13</p>
<p class=" card-information">P 45</p>
<a href="#">Saiba mais</a>
</div>
<div class="card d-xl-flex text-center d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="tent" x="0px" y="0px" viewBox="0 0 483.32 483.32" style="enable-background:new 0 0 483.32 483.32;" xml:space="preserve" width="512px" height="512px" class="lazy-line-painter" data-llp-composed="true">
<g>
<g>
<g>
<rect x="341.664" y="465.66" width="16" height="16" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-0" data-llp-duration="890" data-llp-delay="0" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<rect x="313.674" y="338.617" transform="matrix(0.8805 -0.4741 0.4741 0.8805 -150.0898 200.0408)" width="16" height="118.12" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-1" data-llp-duration="890" data-llp-delay="890" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M96.008,231.316l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48l-0.056,0.056 c-2.961-3.123-7.892-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352v25.376 L0.008,220.004l11.312,11.312l34.344-34.344v25.376L0.008,268.004l11.312,11.312l34.344-34.344v25.376L0.008,316.004 l11.312,11.312l34.344-34.344V481.66h16V292.972l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312 l-45.656-45.656v-25.376L96.008,231.316z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-2" data-llp-duration="890" data-llp-delay="1780" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M472.008,263.316l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48l-0.056,0.056 c-2.961-3.123-7.893-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352v25.376 l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v76.688l-16.8-35.416 c-1.316-2.788-4.117-4.571-7.2-4.584h-104v-60.688l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344 l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48 l-0.056,0.056c-2.961-3.123-7.893-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352 v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656 l11.312,11.312l34.344-34.344v60.688h-112c-2.257,0.013-4.4,0.992-5.888,2.688c-0.473,0.473-0.874,1.012-1.192,1.6l-80,152 c-2.05,3.914-0.539,8.749,3.375,10.799c1.143,0.599,2.415,0.912,3.705,0.913h240v-16h-75.2l-71.552-136H392.6l64.424,136h-83.36 v16h96c4.418-0.017,7.986-3.612,7.97-8.03c-0.004-1.174-0.267-2.333-0.77-3.394l-39.2-82.808V276.972l34.344,34.344l11.312-11.312 l-45.656-45.656v-25.376L472.008,263.316z M157.664,465.66H98.912l58.752-111.624V465.66z M232.416,465.66h-58.752V354.036 L232.416,465.66z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-3" data-llp-duration="890" data-llp-delay="2670" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M153.664,1.66c-4.418,0.001-7.999,3.583-7.998,8.002c0,2.121,0.843,4.154,2.342,5.654 c8.262,7.425,13.601,17.556,15.056,28.568c1.516,13.506-8.203,25.684-21.709,27.2c-1.825,0.205-3.667,0.205-5.491,0l0.024-0.024 c-11.012-1.455-21.143-6.794-28.568-15.056c-3.125-3.124-8.19-3.123-11.314,0.002c-1.499,1.5-2.342,3.534-2.342,5.654 c0,33.137,26.863,60,60,60s60-26.863,60-60S186.801,1.66,153.664,1.66z M193.287,80.838 c-10.592,21.871-36.908,31.015-58.778,20.423c-8.904-4.312-16.095-11.499-20.412-20.401c6.371,3.432,13.381,5.515,20.592,6.12 c12.063,1.097,23.998-3.169,32.632-11.664c13.512-14.532,15.773-36.253,5.544-53.256 C194.735,32.652,203.878,58.968,193.287,80.838z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-4" data-llp-duration="890" data-llp-delay="3560" fill-opacity="0" style="" />
</g>
</g>
</g>
</svg>
<p class="text-center m-xl-3 title">
outdoor
</p>
<p class="">Lorem Ipsum.</p>
<p class="m-1 card-information"></p>
<p class="card-information">P 2</p>
<a href="#">Saiba mais</a>
</div>
<script type="text/javascript">
(function() {
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
/**
* Setup your Lazy Line element.
* see README file for more settings
*/
let el = document.querySelector('#tent');
let myAnimation = new LazyLinePainter(el, {
"ease": "easeLinear",
"strokeWidth": 4,
"strokeOpacity": 1,
"strokeColor": "004d88",
"strokeCap": "square"
});
myAnimation.paint();
}
}
})();
// svg prepared using Lazy Line Composer
// http://lazylinepainter.info/#composer
let wrap = document.querySelector("#tent");
let el = document.querySelector("#tent");
let myAnimation = new LazyLinePainter(el, {
ease: "easeInOutQuad"
});
// Timeline Events
myAnimation.on("start", event => {
wrap.classList.remove("tl-complete");
});
myAnimation.on("complete", event => {
wrap.classList.add("tl-complete");
});
// Path Events
myAnimation.on("start:llpface-0", event => {
event.el.classList.remove("path-complete");
});
myAnimation.on("complete:llpface-0", event => {
event.el.classList.add("path-complete");
});
el.addEventListener("click", paint, false);
function paint() {
myAnimation.paint();
}
paint();
</script>
<script type="text/javascript">
(function() {
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
/**
* Setup your Lazy Line element.
* see README file for more settings
*/
let el = document.querySelector('#casa');
let myAnimation = new LazyLinePainter(el, {
"ease": "easeLinear",
"strokeWidth": 1,
"strokeOpacity": 1,
"strokeColor": "004d88",
"strokeCap": "square"
});
myAnimation.paint();
}
}
})();
// svg prepared using Lazy Line Composer
// http://lazylinepainter.info/#composer
let wrap = document.querySelector("#casa");
let el = document.querySelector("#casa");
let myAnimation = new LazyLinePainter(el, {
ease: "easeInOutQuad"
});
// Timeline Events
myAnimation.on("start", event => {
wrap.classList.remove("tl-complete");
});
myAnimation.on("complete", event => {
wrap.classList.add("tl-complete");
});
// Path Events
myAnimation.on("start:llpface-0", event => {
event.el.classList.remove("path-complete");
});
myAnimation.on("complete:llpface-0", event => {
event.el.classList.add("path-complete");
});
el.addEventListener("click", paint, false);
function paint() {
myAnimation.paint();
}
paint();
</script>
http://lazylinepainter.info/