Related
Hi so I don't have much experience in this so I'm little confused why the SVG xml code change after I resave it in illustrator ? are the path change to anther type ?
this how SVG paths looks in notepad++ in it original form
<svg width="82" height="79" viewBox="0 0 82 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M69.8096 42.6079C74.6204 40.529 82.5999 32.8914 80.7182 28.5365C78.8363 24.1817 67.8057 24.7589 62.9949 26.8378C58.1841 28.9167 55.8098 34.1321 57.6916 38.487C59.5734 42.8418 64.9988 44.6868 69.8096 42.6079Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M18.262 77.0413C13.9762 77.0413 11.3323 72.3624 13.5434 68.6911L22.1862 54.3413H31.1007L23.3735 73.5855C22.5352 75.6732 20.5117 77.0413 18.262 77.0413Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M30.6561 77.0408C26.506 77.0408 23.6702 72.8464 25.2166 68.9952L31.1008 54.3408H40.0154L36.4032 72.333C35.8535 75.071 33.4486 77.0408 30.6561 77.0408Z" fill="#8CCDE9"/>
<path d="M30.6561 77.0408C26.506 77.0408 23.6702 72.8464 25.2166 68.9952L31.1008 54.3408H40.0154L36.4032 72.333C35.8535 75.071 33.4486 77.0408 30.6561 77.0408Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M42.8632 77.0408C39.0333 77.0408 36.1615 73.5353 36.9154 69.7803L40.0151 54.3408H48.9297V70.9744C48.9297 74.3249 46.2137 77.0408 42.8632 77.0408Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M36.7022 7.27252L36.7021 7.2725C35.541 6.44538 34.1189 6.13104 32.6829 6.39418C31.5026 6.61168 30.3708 5.82862 30.1544 4.65001L30.1543 4.64978C29.938 3.47011 30.7189 2.33811 31.8989 2.12176L31.8989 2.12175C34.4879 1.64722 37.0936 2.21797 39.2224 3.73449C41.3293 5.23543 42.7629 7.53373 43.1473 10.0543C43.3282 11.2401 42.5135 12.3474 41.3286 12.5286C41.2173 12.5458 41.1071 12.5538 40.9989 12.5538C39.9432 12.5538 39.0174 11.7851 38.8533 10.7093L36.7022 7.27252ZM36.7022 7.27252C37.8684 8.10321 38.6478 9.36211 38.8533 10.7092L36.7022 7.27252Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M67.0963 39.3012C67.0963 22.2743 55.4126 8.47119 41.0001 8.47119C26.5876 8.47119 14.9038 22.2743 14.9038 39.3012C14.9038 56.3281 26.5876 61.8259 41.0001 61.8259C55.4126 61.8259 67.0963 56.3281 67.0963 39.3012Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M34.1577 36.4794C36.7419 36.4794 38.8368 34.8111 38.8368 32.7531C38.8368 30.6952 36.7419 29.0269 34.1577 29.0269C31.5735 29.0269 29.4786 30.6952 29.4786 32.7531C29.4786 34.8111 31.5735 36.4794 34.1577 36.4794Z" fill="#FFA6BB"/>
<path d="M59.5204 36.4794C62.1045 36.4794 64.1994 34.8111 64.1994 32.7531C64.1994 30.6952 62.1045 29.0269 59.5204 29.0269C56.9362 29.0269 54.8413 30.6952 54.8413 32.7531C54.8413 34.8111 56.9362 36.4794 59.5204 36.4794Z" fill="#FFA6BB"/>
<path d="M46.1742 25.9936L43.1262 29.6736C42.6048 30.3031 42.6801 31.2334 43.2959 31.7709L45.8273 33.9801C46.4073 34.4862 47.2718 34.4862 47.8518 33.9801L50.3832 31.7709C50.999 31.2334 51.0743 30.3031 50.5529 29.6736L47.505 25.9936C47.1595 25.5764 46.5196 25.5764 46.1742 25.9936Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M39.1124 29.8698C38.4652 29.8698 37.9405 29.3452 37.9405 28.6979C37.9405 28.1159 37.4671 27.6426 36.8852 27.6426C36.3034 27.6426 35.8301 28.1159 35.8301 28.6979C35.8301 29.3452 35.3054 29.8698 34.6582 29.8698C34.011 29.8698 33.4863 29.3452 33.4863 28.6979C33.4863 26.8237 35.011 25.2988 36.8852 25.2988C38.7595 25.2988 40.2843 26.8237 40.2843 28.6979C40.2843 29.3451 39.7598 29.8698 39.1124 29.8698Z" fill="black"/>
<path d="M59.021 29.8698C58.3736 29.8698 57.8491 29.3452 57.8491 28.6979C57.8491 28.1159 57.3757 27.6426 56.7938 27.6426C56.2119 27.6426 55.7385 28.1159 55.7385 28.6979C55.7385 29.3452 55.2139 29.8698 54.5666 29.8698C53.9192 29.8698 53.3947 29.3452 53.3947 28.6979C53.3947 26.8237 54.9196 25.2988 56.7938 25.2988C58.668 25.2988 60.1928 26.8237 60.1928 28.6979C60.1928 29.3451 59.6683 29.8698 59.021 29.8698Z" fill="black"/>
<path d="M38.3904 66.1445C36.7035 66.1445 35.3362 64.7771 35.3362 63.0903V59.7134C35.3362 58.0265 36.7035 56.6592 38.3904 56.6592C40.0773 56.6592 41.4446 58.0265 41.4446 59.7134V63.0903C41.4446 64.7771 40.0773 66.1445 38.3904 66.1445Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M54.2496 66.1445C55.9365 66.1445 57.3038 64.7771 57.3038 63.0903V59.7134C57.3038 58.0265 55.9365 56.6592 54.2496 56.6592C52.5627 56.6592 51.1954 58.0265 51.1954 59.7134V63.0903C51.1954 64.7771 52.5627 66.1445 54.2496 66.1445Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M12.1904 42.6079C7.37966 40.529 -0.599872 32.8914 1.28185 28.5365C3.16372 24.1817 14.1943 24.7589 19.0051 26.8378C23.8159 28.9167 26.1903 34.1321 24.3084 38.487C22.4267 42.8418 17.0012 44.6868 12.1904 42.6079Z" fill="white" stroke="#222222" stroke-width="2"/>
</svg>
and this after I resave it in illustrator without changing any thing
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-308 411 82 79"
style="enable-background:new -308 411 82 79;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#222222;stroke-width:2;}
.st1{fill:#8CCDE9;}
.st2{fill:#FFA6BB;}
</style>
<metadata>
<sfw xmlns="&ns_sfw;">
<slices></slices>
<sliceSourceBounds width="82" height="77.1" bottomLeftOrigin="true" x="0" y="1"></sliceSourceBounds>
</sfw>
</metadata>
<path class="st0" d="M-238.2,453.6c4.8-2.1,12.8-9.7,10.9-14.1c-1.9-4.4-12.9-3.8-17.7-1.7c-4.8,2.1-7.2,7.3-5.3,11.6
C-248.4,453.8-243,455.7-238.2,453.6z"/>
<path class="st0" d="M-289.7,488c-4.3,0-6.9-4.7-4.7-8.4l8.6-14.3h8.9l-7.7,19.2C-285.5,486.7-287.5,488-289.7,488z"/>
<path class="st1" d="M-277.3,488c-4.2,0-7-4.2-5.4-8l5.9-14.7h8.9l-3.6,18C-272.1,486.1-274.6,488-277.3,488z"/>
<path class="st0" d="M-277.3,488c-4.2,0-7-4.2-5.4-8l5.9-14.7h8.9l-3.6,18C-272.1,486.1-274.6,488-277.3,488z"/>
<path class="st0" d="M-265.1,488c-3.8,0-6.7-3.5-5.9-7.3l3.1-15.4h8.9V482C-259.1,485.3-261.8,488-265.1,488z"/>
<path class="st0" d="M-271.3,418.3L-271.3,418.3c-1.2-0.8-2.6-1.1-4-0.9c-1.2,0.2-2.3-0.6-2.5-1.7l0,0c-0.2-1.2,0.6-2.3,1.7-2.5l0,0
c2.6-0.5,5.2,0.1,7.3,1.6c2.1,1.5,3.5,3.8,3.9,6.3c0.2,1.2-0.6,2.3-1.8,2.5c-0.1,0-0.2,0-0.3,0c-1.1,0-2-0.8-2.1-1.8L-271.3,418.3z
M-271.3,418.3c1.2,0.8,1.9,2.1,2.2,3.4L-271.3,418.3z"/>
<path class="st0" d="M-240.9,450.3c0-17-11.7-30.8-26.1-30.8s-26.1,13.8-26.1,30.8c0,17,11.7,22.5,26.1,22.5
S-240.9,467.3-240.9,450.3z"/>
<path class="st2" d="M-273.8,447.5c2.6,0,4.7-1.7,4.7-3.7c0-2.1-2.1-3.7-4.7-3.7c-2.6,0-4.7,1.7-4.7,3.7
C-278.5,445.8-276.4,447.5-273.8,447.5z"/>
<path class="st2" d="M-248.5,447.5c2.6,0,4.7-1.7,4.7-3.7c0-2.1-2.1-3.7-4.7-3.7c-2.6,0-4.7,1.7-4.7,3.7
C-253.2,445.8-251.1,447.5-248.5,447.5z"/>
<path class="st0" d="M-261.8,437l-3,3.7c-0.5,0.6-0.4,1.6,0.2,2.1l2.5,2.2c0.6,0.5,1.4,0.5,2,0l2.5-2.2c0.6-0.5,0.7-1.5,0.2-2.1
l-3-3.7C-260.8,436.6-261.5,436.6-261.8,437z"/>
<path d="M-268.9,440.9c-0.6,0-1.2-0.5-1.2-1.2c0-0.6-0.5-1.1-1.1-1.1c-0.6,0-1.1,0.5-1.1,1.1c0,0.6-0.5,1.2-1.2,1.2
c-0.6,0-1.2-0.5-1.2-1.2c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C-267.7,440.3-268.2,440.9-268.9,440.9z"/>
<path d="M-249,440.9c-0.6,0-1.2-0.5-1.2-1.2c0-0.6-0.5-1.1-1.1-1.1c-0.6,0-1.1,0.5-1.1,1.1c0,0.6-0.5,1.2-1.2,1.2
c-0.6,0-1.2-0.5-1.2-1.2c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C-247.8,440.3-248.3,440.9-249,440.9z"/>
<path class="st0" d="M-269.6,477.1c-1.7,0-3.1-1.4-3.1-3.1v-3.4c0-1.7,1.4-3.1,3.1-3.1c1.7,0,3.1,1.4,3.1,3.1v3.4
C-266.6,475.8-267.9,477.1-269.6,477.1z"/>
<path class="st0" d="M-253.8,477.1c1.7,0,3.1-1.4,3.1-3.1v-3.4c0-1.7-1.4-3.1-3.1-3.1c-1.7,0-3.1,1.4-3.1,3.1v3.4
C-256.8,475.8-255.4,477.1-253.8,477.1z"/>
<path class="st0" d="M-295.8,453.6c-4.8-2.1-12.8-9.7-10.9-14.1c1.9-4.4,12.9-3.8,17.7-1.7s7.2,7.3,5.3,11.6
C-285.6,453.8-291,455.7-295.8,453.6z"/>
</svg>
thank you
Did you perhaps move the image between importing and saving? The viewBox X and Y has changed, and the path coordinates have been adjusted to match.
Before: viewBox="0 0 82 79"
After: viewBox="-308 411 82 79"
well I finally get the answer first I open the svg code in windows and open it in mac same svg but the code was not the same so in my illustrator in mac i put in the styling :internal css and in the decimal : 5 after that I transformed the the path to absolute and that fixed the problem .
I'm having trouble adding and firing an event listener with javascript on this svg element. Js is at the bottom of the code block. I can set the target ID to a variable no problem. It's attaching an event listener and doing "something" on click/hover that seems to be the issue. The end goal is to show the box when hovering over the dot by adjusting the opacity.
var dot15 = document.getElementById('Dot_15');
var box15 = document.getElementById('Info_Box_15');
dot15.addEventListener('mouseover', function() {
box15.style.opacity = "1";
});
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="777.6px" height="491px" viewBox="607.3 235.5 777.6 491" style="enable-background:new 607.3 235.5 777.6 491;" xml:space="preserve">
<style type="text/css">
.st0{fill:#00A76F;}
.st1{fill:#FFFFFF;}
.st2{font-family:'BarlowCondensed-SemiBold';}
.st3{font-size:14px;}
.st4{font-family:'BarlowCondensed-Medium';}
.st5{font-size:12px;}
.st6{opacity:0.15;fill:#454544;}
#Info_Box_15 {opacity:0}
</style>
<g id="Info_Box_15">
<polygon class="st0" points="1156.7,556.4 1149,548.4 1073,548.4 1073,501.4 1156.7,501.4 "/>
<text transform="matrix(1 0 0 1 1076.6688 516.0011)"><tspan x="0" y="0" class="st1 st2 st3">Gasden</tspan><tspan x="0" y="14" class="st1 st4 st5">Gasden, Alabama</tspan><tspan x="0" y="28" class="st1 st4 st5">89,000 sq. ft.</tspan>
</text>
</g>
<g id="Dot_15" transform="translate(608.399428608477,176.3959312419786)" cursor="pointer">
<path class="st0" d="M548.3,389.1L548.3,389.1c1.9,0,3.5-1.5,3.5-3.5v0c0-1.9-1.5-3.5-3.5-3.5h0c-1.9,0-3.5,1.5-3.5,3.5v0
C544.9,387.5,546.4,389.1,548.3,389.1z"/>
</g>
<g id="Site_x5F_3_x5F_Blue_x5F_Valley">
<g id="Info_box_3">
<polygon class="st0" points="1018.2,467.3 1010.5,459.4 934.5,459.4 934.5,412.3 1018.2,412.3 "/>
<text transform="matrix(1 0 0 1 938.1677 426.9739)"><tspan x="0" y="0" class="st1 st2 st3">BLUE VALLEY</tspan><tspan x="0" y="14" class="st1 st4 st5">Kansas City, KS</tspan><tspan x="0" y="28" class="st1 st4 st5">83,224 sq. ft.</tspan></text>
</g>
<g id="Dot_3" transform="translate(608.399428608477,176.3959312419786)">
<path class="st0" d="M409.8,300L409.8,300c1.9,0,3.5-1.5,3.5-3.5v0c0-1.9-1.5-3.5-3.5-3.5h0c-1.9,0-3.5,1.5-3.5,3.5v0
C406.4,298.5,407.9,300,409.8,300z"/>
</g>
</g>
I need to animate the logo like so:
Here is its SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve" id="mylogo">
<style type="text/css">
.st0{fill:#231F20;}
</style>
<g id="cap_arch_connector_vert">
<path class="st0" d="M333.7,195.4c-5.4,0-10.7,0.4-16,1v39.3c5.2-0.8,10.6-1.2,16-1.2h16v-39.1H333.7z"/>
</g>
<g id="cap_bottom_arch">
<path class="st0" d="M333.7,231c-56.4,0-103.2,41.8-111,96.1v0h32.5c7.4-36.5,39.8-64.1,78.5-64.1h65.2l10.4-32H333.7z"/>
</g>
<g id="arched_line_right">
<path class="st0" d="M641.9,570l-23,23c18.7,14,42,22.3,67.1,22.3c5.4,0,10.8-0.4,16-1.1v-32.5c-5.2,1.1-10.5,1.6-16,1.6
C669.7,583.3,654.5,578.4,641.9,570z"/>
</g>
<g id="right_leg_line_1">
<path class="st0" d="M702,646.4c-5.3,0.6-10.6,0.9-16,0.9c-79.5,0-144.1-64.7-144.1-144.1l0.3-272.2h-32l-0.3,272.2
c0,97.1,79,176.1,176.1,176.1c5.4,0,10.7-0.3,16-0.8V646.4z"/>
</g>
<g id="arch_under_circle">
<path class="st0" d="M203.3,615.3c24.8,0,48.2-8.2,67.1-22.3l-23-23c-12.8,8.4-28,13.3-44.1,13.3c-26.1,0-49.4-12.6-64-32H102
C120,589.1,158.7,615.3,203.3,615.3z"/>
</g>
<g id="circle">
<path class="st0" d="M203.3,551.3c-26.5,0-48-21.6-48-48s21.5-48,48-48s48,21.6,48,48S229.8,551.3,203.3,551.3z M203.3,487.2
c-8.8,0-16,7.2-16,16c0,8.8,7.2,16,16,16s16-7.2,16-16C219.3,494.4,212.1,487.2,203.3,487.2z"/>
</g>
<g id="line_to_circle">
<path class="st0" d="M27.9,487.2c-0.5,5.3-0.7,10.6-0.7,16c0,5.4,0.3,10.7,0.8,16h145.7v-32H27.9z"/>
</g>
<g id="leg_connector">
<path class="st0" d="M297,529l-13.5-13.5l-4.3,13.2c-2.3,6.7-5.4,12.9-9.1,18.6l12.4,12.4v0l34,34l0,0l7.6,7.6l22.4-22.9L297,529z"
/>
</g>
<g id="arch_connector">
<path class="st0" d="M277.8,600.3l-7.4-7.4l0,0l-6-6l-3.8-3.8l0,0L247.4,570c-9.8,6.4-20.9,10.8-32.8,12.5l26.3,26.3l38.4,38.4
l22.4-22.9L277.8,600.3z"/>
</g>
<g id="cap_mid-bottom_parallel_line">
<polygon class="st0" points="542.2,231 443,231 432.6,263 542.1,263 "/>
</g>
<g id="arch_connector_very_right">
<path class="st0" d="M686,583.3c-5.5,0-10.8-0.6-16-1.6v19.4v13.1v32.3v18.7v13.5c5.3,0.5,10.6,0.8,16,0.8s10.7-0.3,16-0.8v-13.5
v-18.7v-32.3v-13.1v-19.4C696.8,582.7,691.5,583.3,686,583.3z"/>
</g>
<g id="arch_connector_right">
<path class="st0" d="M674.7,582.5c-12-1.7-23.1-6.1-32.8-12.5l-13.1,13.1l-9,9l-24.4,24.4L584,626.6l25.9,20.7l49.4-49.4
L674.7,582.5z"/>
</g>
<g id="right_leg_connector">
<path class="st0" d="M619.2,547.3c-6.4-9.7-10.8-20.8-12.5-32.8l-26.3,26.3v0l-30.7,30.7l20.9,24.1l2.2-1.8l27.8-27.8L619.2,547.3z
"/>
</g>
<g id="cap_arch_connector_hor">
<path class="st0" d="M246.2,295.1h-48.4h-30.1h-3.5c-2.9,10.3-5,21-5.9,32h0.3l9.2,0v0h55h32.5c2.4-11.8,7.5-22.7,14.5-32H246.2z"
/>
</g>
<g id="cap_top_arch">
<path class="st0" d="M333.7,166.9c-91.7,0-167.3,70.5-175.4,160.2l32.2,0c7.4-66.7,60.5-119.8,127.2-127.2v0.1c5.3-0.6,10.6-1,16-1
h16v-25.2v-6.8H333.7z"/>
</g>
<g id="left_leg_line_1">
<path class="st0" d="M309.6,538.8L409.3,231h-33.7l-96.4,297.7c-2.3,6.7-5.4,12.9-9.1,18.6l23,23
C300.1,561,305.7,550.3,309.6,538.8z"/>
</g>
<g id="left_leg_line_2">
<path class="st0" d="M443,231L340,548.8c-19.8,58.9-74.7,98.5-136.8,98.5c-79.5,0-144.1-64.7-144.1-144.1c0-5.4,0.3-10.7,0.9-16
H27.9c-0.5,5.3-0.7,10.6-0.7,16c0,97.1,79,176.1,176.1,176.1c75.8,0,142.9-48.4,167.2-120.5L476.6,231H443z"/>
</g>
<g id="right_leg_line_2">
<path class="st0" d="M619.2,547.3c-8.4-12.6-13.3-27.8-13.3-44.1l0.3-272.3h-32l-0.3,272.3c0,25.1,8.3,48.4,22.3,67.1L619.2,547.3z
"/>
</g>
<g id="cap_top_parallel_line">
<polygon class="st0" points="728.8,199 718.4,166.9 684.8,166.9 381.7,166.9 381.7,199 695.2,199 "/>
</g>
<g id="cap_bottom_parallel_line">
<polygon class="st0" points="739.2,231 732.3,231 705.5,231 574.2,231 574.2,263 715.9,263 749.6,263 "/>
</g>
<g id="right_cap_corner">
<polygon class="st0" points="749.6,263 739.2,231 739.2,231 728.8,199 728.8,199 718.4,166.9 684.8,166.9 714.2,257.7 714.2,257.7
715.9,263 "/>
</g>
</svg>
I spend a lot of time looking for a solution but mostly I stumbled upon stroke SVG animations. Vivus.js looked like a good solution but it doesn't animate filled path, it works only with stroke. So does pretty much all examples I have found, like DrawSVG etc.
I broke down my SVG into simple elements so it would be easier to animate them. I suppose I have to use some SVG masks as I can't change the existing shape of the logo by applying stroke etc. The only animation that looks similar to mine is on Codepen. SVG code is pretty complicated there and I'm not sure whether the way it was animated there will solve my problem.
How can I animate the logo?
As the comments have suggested it would be advisable to convert the graphic from shapes to to strokes and then use an animation library such as Anime JS or Greensock to perform the animation.
Conversion to strokes
For the conversion to strokes I used Illustrator, and then exported to SVG before optimizing the graphic with Jake Archibald's SVGOMG.
Animation example
I chose the Anime JS library for the animation - see the snippet below.
anime({
targets: 'path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: [0.550, 0.055, 0.100, 1.000],
duration: 1500,
delay: 1200,
direction:'forwards'
});
svg {
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js"></script>
<svg id="mylogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><style>.st0{fill:none;stroke:#231f20;stroke-width:34;stroke-miterlimit:10}</style><path class="st0" d="M382 183.1h324l21 64H589.5v245.5s-2.5 22.5 10 48l-47 51.5s33 62.5 132 73v-61.5l-21.6-2.5-19.4-6.5-43.8 41.3"/><path class="st0" d="M552.5 592.1s-25.5-36-25.5-106v-237h-71.5l-105 315s-10.6 49-74.2 81.8C184 693.6 88 634.6 67.7 592.6c-23.3-32-26.7-88-26.7-88h130.3c-.2-7.4 2.1-14.9 7.1-21.2 11.1-13.7 31.3-15.9 45-4.8s15.9 31.3 4.8 45c-11.1 13.7-31.3 15.9-45 4.8-7.5-6.1-11.5-14.8-11.9-23.7"/><path d="M125.7 561.9s42.7 58.3 117.7 29l44.7 43" fill="none" stroke="#231f20" stroke-width="34" stroke-linecap="square" stroke-miterlimit="10"/><path class="st0" d="M335.7 589.2l-47.3-46 5.3-9.3L386 248.6l-50.5-1.3-3.2-.1c-62-2-90 64.7-90 64.7h-68c42-134 157.3-128 157.3-128l.7 61.9"/><path fill="#fff" d="M92.7 536.2h54v22.7h-54z"/></svg>
Any further questions related to the graphic itself would be better on graphic design StackExchange.
I have created an animation using svgcircus.com, if I place it in webpage the animation doesn't play and just see static svg without animation but if I drag and drop SVG directly into browser then it plays:
Here is how I call it:
<img src="marker-with-wave.svg"/>
Here is my SVG:
<?xml version="1.0" standalone="no"?>
<!-- Generator: SVG Circus (http://svgcircus.com) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle id="actor_4" cx="50" cy="50" r="25" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_3" cx="50" cy="50" r="20" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_2" cx="50" cy="50" r="15" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_1" cx="50" cy="50" r="10" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<g transform="translate(20 -1020)">
<path style="fill:#00A0A0;" d="M30,1043.4c-5.523,0-10,4.477-10,10c0,1.776,0.477,3.438,1.289,4.882
c0.135,0.24,0.276,0.476,0.43,0.704L30,1073.4l8.281-14.414c0.127-0.189,0.237-0.389,0.351-0.586l0.079-0.118
c0.811-1.445,1.289-3.106,1.289-4.882C40,1047.877,35.522,1043.4,30,1043.4z M30,1048.4c2.761,0,5,2.239,5,5c0,2.761-2.239,5-5,5
c-2.761,0-5-2.239-5-5C25,1050.639,27.239,1048.4,30,1048.4z"/>
<path style="fill:#008282;" d="M30,1047.15c-3.452,0-6.25,2.798-6.25,6.25c0,3.451,2.798,6.25,6.25,6.25
c3.451,0,6.25-2.799,6.25-6.25C36.25,1049.948,33.451,1047.15,30,1047.15z M30,1049.65c2.071,0,3.75,1.679,3.75,3.75
s-1.679,3.75-3.75,3.75s-3.75-1.679-3.75-3.75S27.929,1049.65,30,1049.65z"/>
</g>
<script type="text/ecmascript"><![CDATA[(function(){var actors={};actors.actor_1={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_1"),type:"circle",cx:50,cy:50,dx:20,dy:32,opacity:1};actors.actor_2={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_2"),type:"circle",cx:50,cy:50,dx:30,dy:30,opacity:1};actors.actor_3={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_3"),type:"circle",cx:50,cy:50,dx:40,dy:30,opacity:1};actors.actor_4={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_4"),type:"circle",cx:50,cy:50,dx:50,dy:30,opacity:1};var tricks={};tricks.trick_1=(function(_,t){t=(function(n){return--n*n*n+1})(t)%1,t=0>t?1+t:t;var i;i=0.00>=t?1+(0.5-1)/0.00*t:t>=0.13?0.5-(t-0.13)*((0.5-1)/(1-0.13)):0.5;var a=_._tMatrix,r=-_.cx*i+_.cx,x=-_.cy*i+_.cy,c=a[0]*i,n=a[1]*i,M=a[2]*i,f=a[3]*i,g=a[0]*r+a[2]*x+a[4],m=a[1]*r+a[3]*x+a[5];_._tMatrix[0]=c,_._tMatrix[1]=n,_._tMatrix[2]=M,_._tMatrix[3]=f,_._tMatrix[4]=g,_._tMatrix[5]=m});tricks.trick_2=(function(t,i){i=(function(n){return.5>n?2*n*n:-1+(4-2*n)*n})(i)%1,i=0>i?1+i:i;var _=t.node;0.1>=i?_.setAttribute("opacity",i*(t.opacity/0.1)):i>=0.2?_.setAttribute("opacity",t.opacity-(i-0.2)*(t.opacity/(1-0.2))):_.setAttribute("opacity",t.opacity)});var scenarios={};scenarios.scenario_1={actors: ["actor_1","actor_2","actor_3","actor_4"],tricks: [{trick: "trick_1",start:0,end:1.00},{trick: "trick_2",start:0,end:1}],startAfter:0,duration:2000,actorDelay:100,repeat:0,repeatDelay:1000};var _reqAnimFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame,fnTick=function(t){var r,a,i,e,n,o,s,c,m,f,d,k,w;for(c in actors)actors[c]._tMatrix=[1,0,0,1,0,0];for(s in scenarios)for(o=scenarios[s],m=t-o.startAfter,r=0,a=o.actors.length;a>r;r++){if(i=actors[o.actors[r]],i&&i.node&&i._tMatrix)for(f=0,m>=0&&(d=o.duration+o.repeatDelay,o.repeat>0&&m>d*o.repeat&&(f=1),f+=m%d/o.duration),e=0,n=o.tricks.length;n>e;e++)k=o.tricks[e],w=(f-k.start)*(1/(k.end-k.start)),tricks[k.trick]&&tricks[k.trick](i,Math.max(0,Math.min(1,w)));m-=o.actorDelay}_reqAnimFrame(fnTick)};_reqAnimFrame(fnTick);})()]]></script>
</svg>
Instead of <img /> if I use <object></object> SVG is animation is working.
<object type="image/svg+xml" data="marker-with-wave.svg">
Your browser does not support SVG
</object>
I'm trying to draw a simple svg as the user scrolls down on the viewport. I'm using skrollr because it's meant to be simple, but I can not make it work.
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1610.2 1604.6" style="enable-background:new 0 0 1610.2 1604.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1D1D1D;}
.st1{fill:none;stroke:#666666;stroke-miterlimit:10;}
.st2{fill:none;stroke:#666666;stroke-width:1.0674;stroke-miterlimit:10;}
.st3{fill:#666666;}
.st4{fill:url(#SVGID_1_);stroke:#666666;stroke-miterlimit:10;}
.st5{fill:#161616;stroke:#666666;stroke-miterlimit:10;}
.st6{fill:url(#SVGID_2_);stroke:#666666;stroke-miterlimit:10;}
.st7{fill:#F7F7F7;}
</style>
<rect data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" x="-397.1" y="-1042.5" class="" width="447.4" height="295"/>
<line data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st1" x1="-400" y1="-988.5" x2="-86" y2="-988.5"/>
<line data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st1" x1="-7" y1="-989" x2="50.3" y2="-988.5"/>
<rect data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" x="-74.5" y="-1016.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 685.2816 -322.584)" class="st2" width="55.5" height="55.5"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M-46.8-1025.2L-46.8-1025.2c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-44.2-1026.3-45.3-1025.2-46.8-1025.2z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class=" st3" d="M-46.8-946.9L-46.8-946.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-44.2-948-45.3-946.9-46.8-946.9z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M-7.7-985.9L-7.7-985.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-5.1-987.1-6.3-985.9-7.7-985.9z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M50.3-986.2L50.3-986.2c-1.2,0-2.2-1-2.2-2.2l0,0c0-1.2,1-2.2,2.2-2.2h0c1.2,0,2.2,1,2.2,2.2l0,0
C52.6-987.3,51.6-986.2,50.3-986.2z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M-86-985.9L-86-985.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6l0,0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-83.4-987.1-84.6-985.9-86-985.9z"/>
<linearGradient data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="885.6667" y1="-1039.5" x2="885.6667" y2="-410.7027">
<stop offset="0" style="stop-color:#212121"/>
<stop offset="1" style="stop-color:#212121"/>
</linearGradient>
<polygon data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st4" points="50.3,-1042.5 50.3,-378.5 1721,-1040.5 "/>
<polygon class="st5" points="1721,-1040.5 2302.9,-1040.5 1564.7,-747.5 981.6,-747.5 "/>
<linearGradient id="SVGID_2_" data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" gradientUnits="userSpaceOnUse" x1="1564.6666" y1="-894" x2="2302.9167" y2="-894">
<stop offset="0" style="stop-color:#212121"/>
<stop offset="1" style="stop-color:#212121"/>
</linearGradient>
<polygon data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st6" points="2302.9,-747.5 2302.9,-1040.5 1564.7,-747.5 "/>
<rect x="393" y="-926.5" class="st7" width="593" height="434"/>
<g data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" >
<polyline class="st1" points="2.5,0 2.5,162 43.2,162 43.2,30 748.7,30 748.7,162 916.7,162 1516.8,162 1607.7,162 1607.7,911.1
1512.8,911.1 1512.8,778.1 815.8,778.1 815.8,912.1 641.7,912.1 293.8,912.1 293.8,1264.1 293.8,1597.1 343.3,1597.1 343.3,1462.1
1040.8,1462.1 1040.8,1602.1 1108.2,1602.1 "/>
<circle class="st3" cx="2.5" cy="162" r="2.5"/>
<circle class="st3" cx="43.2" cy="162" r="2.5"/>
<circle class="st3" cx="748.7" cy="162" r="2.5"/>
<circle class="st3" cx="1512.9" cy="778.1" r="2.5"/>
<circle class="st3" cx="1512.8" cy="911" r="2.5"/>
<circle class="st3" cx="1607.7" cy="911" r="2.5"/>
<circle class="st3" cx="815.8" cy="778.4" r="2.5"/>
<circle class="st3" cx="815.7" cy="912.1" r="2.5"/>
<circle class="st3" cx="293.8" cy="1597" r="2.5"/>
<circle class="st3" cx="343.5" cy="1597" r="2.5"/>
<circle class="st3" cx="343.2" cy="1462.2" r="2.5"/>
<circle class="st3" cx="1040.8" cy="1462" r="2.5"/>
<circle class="st3" cx="1040.7" cy="1602.1" r="2.5"/>
</g>
</svg>
Here is a pen to my code:
http://codepen.io/ohmmho/pen/zqjbRW
May be I'm setting the data-end/start points to the wrong elements? There are elements like 'line' and 'rect' that confuse me, I'm learning SVG animations. Some light on this would be appreciated.
Thanks ;)
Finally, after a further research, I found out what I was doing wrong: Those shape elements like circle or polygon need to be paths in order to accomplish what I'm trying. You can export your svg file from Illustrator properly or convert them with some tools, more info on this here.
My codepen works now :D
You can only draw in objects with a stroke.
In your svg only these classed elements have a stroke:
.st1{fill:none;stroke:#666666;stroke-miterlimit:10;}
.st2{fill:none;stroke:#666666;stroke-width:1.0674;stroke-miterlimit:10;}
You also need to offset this stroke with css:
style="stroke-dasharray:2000;stroke-dashoffset:2000"
And try these attribute values- you can use any of the Skrollr options:
(you are either moving the line from a value off set to 0, or from 0 to an offset (to draw out an object)
data-top="stroke-dashoffset:0;"
data-center-top="stroke-dashoffset:2000;"