So I got SVG file, which should "Roll", but it doesn't. Thing is, everything was working on localhost, but not on hosting. I also added .htaccess files those required lines, still nothing. Even enabled .htaccess files.
Here is wheel code: http://pastebin.com/rGKkTb1X (It is pretty big, it's why pastebin).
<div class="wheel_container col s6" style="padding: none;">
<object type="image/svg+xml" data="images/wheel.svg" class="wheel" id="wheel">Your browser does not support SVG</object>
</div>
Code for spin
<g xmlns="http://www.w3.org/2000/svg" id="spin">
<g>
<g>
<path class="st1" d="M432.3,38.5c-34.2,7.3-68.1,18.3-101.3,33.1s-64,32.7-92.3,53.1l72.2,99.4l-0.4,0.3 c21.6-15.7,45.1-29.3,70.5-40.6c25.3-11.3,51.2-19.6,77.3-25.2l-0.5,0.1L432.3,38.5z"/>
</g>
<text transform="matrix(0.9136 -0.4067 0.4067 0.9135 322.6442 175.6196)" class="st0 st2 st3">14</text>
</g>
<g>
<g>
<path class="st4" d="M237.9,125.3c-28.2,20.6-54.8,44.4-79.1,71.4s-45.2,55.9-62.7,86.1l106.4,61.4l-0.2,0.4 c13.4-23.1,29.3-45.1,47.9-65.8s38.8-38.8,60.4-54.5l-0.4,0.3L237.9,125.3z"/>
</g>
<text transform="matrix(0.6691 -0.7431 0.7431 0.6691 210.1937 276.5912)" class="st0 st2 st5">7</text>
</g>
<g>
<g>
<path class="st1" d="M95.6,283.6c-17.4,30.3-32,62.8-43.2,97.4s-18.6,69.4-22.3,104.2l122.2,12.8l-0.1,0.5 c2.8-26.5,8.4-53.2,17-79.5c8.6-26.4,19.7-51.2,33-74.3l-0.2,0.4L95.6,283.6z"/>
</g>
<text transform="matrix(0.309 -0.951 0.9511 0.309 124.1028 456.9215)" class="st0 st2 st6">13</text>
</g>
<g>
<g>
<path class="st4" d="M30,486.2c-3.6,34.8-3.6,70.4,0.2,106.5s11.3,71,22,104.2L169,659l0.2,0.5c-8.2-25.4-13.9-52-16.8-79.6 s-2.8-54.8-0.1-81.3l-0.1,0.5L30,486.2z"/>
</g>
<text transform="matrix(-0.1045 -0.9945 0.9945 -0.1045 123.8907 608.0349)" class="st0 st2 st7">6</text>
</g>
<g>
<g>
<path class="st1" d="M52.4,697.9c10.9,33.2,25.3,65.8,43.5,97.3c18.2,31.5,39.2,60.3,62.5,86.3l91.3-82.2l0.3,0.4 c-17.8-19.8-33.9-41.8-47.7-65.9s-24.9-48.9-33.2-74.3l0.2,0.5L52.4,697.9z"/>
</g>
<text transform="matrix(-0.5 -0.866 0.866 -0.5 200.3061 792.6865)" class="st0 st2 st8">12</text>
</g>
<g>
<g>
<path class="st4" d="M159.1,882.2c23.4,25.9,49.9,49.8,79.3,71.2c29.4,21.4,60.3,39.1,92.2,53.4l50-112.3l0.4,0.2 c-24.4-10.9-48-24.4-70.4-40.7c-22.4-16.3-42.6-34.6-60.5-54.4l0.3,0.4L159.1,882.2z"/>
</g>
<text transform="matrix(-0.809 -0.5878 0.5878 -0.809 312.469 893.9415)" class="st0 st2 st9">5</text>
</g>
<g>
<g>
<path class="st1" d="M331.5,1007.2c31.9,14.1,65.8,25.2,101.4,32.8s71,11.2,105.9,11.3V928.4h0.5c-26.7,0-53.8-2.8-80.9-8.6 c-27.1-5.8-53-14.2-77.4-25.1l0.4,0.2L331.5,1007.2z"/>
</g>
<text transform="matrix(-0.9782 -0.2079 0.2079 -0.9781 500.8162 960.7355)" class="st0 st2 st10">11</text>
</g>
<g>
<g>
<path class="st4" d="M539.8,1051.3c34.9-0.1,70.4-3.7,105.9-11.3s69.4-18.6,101.4-32.8l-50-112.3l0.4-0.2 c-24.4,10.8-50.3,19.3-77.4,25.1c-27.1,5.8-54.2,8.6-80.9,8.6h0.5V1051.3z"/>
</g>
<text transform="matrix(-0.9782 0.2079 -0.2079 -0.9781 651.1284 945.1309)" class="st0 st2 st10">4</text>
</g>
<g>
<g>
<path class="st1" d="M748,1006.8c31.9-14.3,62.8-32,92.2-53.4c29.4-21.4,55.8-45.3,79.3-71.2L828.2,800l0.3-0.4 c-17.9,19.8-38.1,38.1-60.5,54.4c-22.4,16.3-46,29.9-70.4,40.7l0.4-0.2L748,1006.8z"/>
</g>
<text transform="matrix(-0.809 0.5878 -0.5878 -0.809 826.7827 849.8548)" class="st0 st2 st9">10</text>
</g>
<g>
<g>
<path class="st4" d="M920.2,881.5c23.3-26,44.3-54.8,62.5-86.3c18.2-31.5,32.6-64.1,43.5-97.3l-116.9-38l0.2-0.5 c-8.3,25.4-19.3,50.3-33.2,74.3s-29.9,46-47.7,65.9l0.3-0.4L920.2,881.5z"/>
</g>
<text transform="matrix(-0.5 0.866 -0.866 -0.5 915.7706 727.7227)" class="st0 st2 st8">3</text>
</g>
<g>
<g>
<path class="st1" d="M1026.4,697c10.7-33.3,18.2-68.1,22-104.2c3.8-36.1,3.7-71.8,0.2-106.5L926.4,499l-0.1-0.5 c2.8,26.5,2.8,53.8-0.1,81.3s-8.6,54.2-16.8,79.6l0.2-0.5L1026.4,697z"/>
</g>
<text transform="matrix(-0.1045 0.9945 -0.9945 -0.1045 959.8926 558.2834)" class="st0 st2 st7">9</text>
</g>
<g>
<g>
<path class="st4" d="M1048.5,485.2c-3.7-34.7-11.1-69.6-22.3-104.2c-11.2-34.6-25.8-67.1-43.2-97.4l-106.4,61.4l-0.2-0.4 c13.3,23.1,24.4,48,33,74.3c8.6,26.4,14.2,53,17,79.5l-0.1-0.5L1048.5,485.2z"/>
</g>
<text transform="matrix(0.309 0.951 -0.9511 0.309 931.2808 385.5747)" class="st0 st2 st6">2</text>
</g>
<g>
<path class="st1" d="M982.5,282.8c-17.5-30.2-38.4-59.1-62.7-86.1s-50.8-50.8-79.1-71.4l-72.2,99.4l-0.4-0.3 c21.6,15.7,41.8,33.9,60.4,54.5s34.5,42.7,47.9,65.8l-0.2-0.4L982.5,282.8z"/>
<text transform="matrix(0.6691 0.7431 -0.7431 0.6691 834.8956 239.4054)" class="st0 st2 st5">8</text>
</g>
<g>
<g>
<path class="st4" d="M839.9,124.7c-28.3-20.5-59.2-38.4-92.3-53.1s-67.1-25.7-101.3-33.1l-25.5,120.2l-0.5-0.1 c26.1,5.6,52,13.9,77.3,25.2s48.9,24.9,70.5,40.6l-0.4-0.3L839.9,124.7z"/>
</g>
<text transform="matrix(0.9136 0.4067 -0.4067 0.9135 687.3855 145.1121)" class="st0 st2 st3">1</text>
</g>
<g>
<path class="st11" d="M645.3,38.3c-34.2-7.2-69.6-11-106-11c-36.3,0-71.8,3.8-106,11l25.5,120.2l-0.5,0.1 c26.1-5.5,53.2-8.4,80.9-8.4c27.7,0,54.8,2.9,80.9,8.4l-0.5-0.1L645.3,38.3z"/>
<text transform="matrix(1 0 0 1 514.27 118.9369)" class="st0 st2 st12">0</text>
</g>
Related
Noticed my SVG text was looking different on different browsers.
After some testing, found that Mobile Safari isn't respecting textLength set on an svg text element.
<text dy="10" textLength="240" fill="red">
Here is the SVG code.
<svg class="passportStamp stampEffectClass" width="120" height="120" viewBox="0 0 206 206">
<circle cx="103" cy="103" r="100" fill="none" stroke="red" stroke-width="3"></circle>
<circle cx="103" cy="103" r="90" fill="none" stroke="red" stroke-width="3"></circle>
<text x="103" y="70" text-anchor="middle" fill="red" stroke-width="2px" alignment-baseline="middle" font-variant="all-small-caps" font-size="31" font-weight="bold">textLength</text>
<text x="103" y="100" text-anchor="middle" fill="red" alignment-baseline="middle" font-variant="all-small-caps" font-size="45">100</text>
<path id="textCircle" d="M28,103a75,75 0 1,0 150,0a75,75 0 1,0 -150,0" fill="none" stroke="none"></path>
<text dy="10" textLength="240" fill="red">
<textPath xlink:href="#textCircle">textLength Chrome vs iOS</textPath>
</text>
<g fill="red" transform="scale(0.15) translate(550 800)">
<path d="m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47"></path>
</g>
<g fill="red" transform="translate(90,30)">
<path d="M14.128 1.79003C13.1305"></path>
</g>
</svg>
Looking at cross browser fallback options, but haven't found any way to make it work yet.
Found the problem. Safari wants the textlength to be set on the textPath.
Solution, set the textlength on both the text for Chrome, and textPath for Safari.
Was tipped off by this issue on the great github project webcompat, which reported similar issues.
Code:
<svg width="205" height="205" class="stampEffectClass isolate">
<circle cx="103" cy="103" r="100" fill="none" stroke="red" stroke-width="3"></circle>
<circle cx="103" cy="103" r="90" fill="none" stroke="red" stroke-width="3"></circle>
<text x="103" y="70"
text-anchor="middle" fill="red" stroke-width="2px" alignment-baseline="middle" font-variant="all-small-caps"
font-size="45" font-weight="bold">textLength</text>
<text x="103" y="100" text-anchor="middle" fill="red"
alignment-baseline="middle" font-variant="all-small-caps" font-size="45">240</text>
<path id="textCircle" d="M28,103a75,75 0 1,0 150,0a75,75 0 1,0 -150,0" fill="none" stroke="none"></path>
<text dy="10"
textLength="240" fill="red">
<textPath xlink:href="#textCircle" textLength="240">textLength Chrome vs iOS</textPath>
</text>
<g fill="red" transform="scale(0.15) translate(550 800)">
<path d="m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47">
</path>
</g>
<g fill="red" transform="translate(90,30)">
<path
d="M14.128 1.79003C13.1305">
</path>
</g>
</svg>
Image showing fix:
I want to reverse the word compared to the line without having to redraw the line, how to do?
/Ps: when I use transform="scale(-1,1)" it doesn't work because the line path is inverted.
You could use <textPath side="..."> for that. However, it's only supported by Firefox right now.
<svg viewBox="0 0 100 55" xmlns="http://www.w3.org/2000/svg">
<path id="curve" fill="none" stroke="limegreen" stroke-width="1" d="M10,5 c20,60 50,50 80,10"></path>
<text font-size="5" dy="-1">
<textPath href="#curve" startOffset="6" side="left">Dangerous curves ahead</textPath>
</text>
<text font-size="5" dy="-1">
<textPath href="#curve" startOffset="9" side="right">Dangerous curves ahead</textPath>
</text>
</svg>
If this is what you have:
body{background:white;}
<svg width="250" height="200" viewBox="0 0 250 200">
<defs>
<path id="thePath" d="M55,100 a70,40 0 1 0 0,-1 z" stroke="#FF0000" fill="transparent" stroke-width="1" ></path>
</defs>
<use xlink:href="#thePath"></use>
<text stroke="#000000" font-size="20">
<textPath xlink:href="#thePath" startOffset="7%">
Some text here
</textPath>
</text>
</svg>
You can apply a transformation transform="scale(-1,1) translate(-250,0)" to the path like so:
body{background:white;}
<svg width="250" height="200" viewBox="0 0 250 200">
<defs>
<path id="thePath" d="M55,100 a70,40 0 1 0 0,-1 z" stroke="#FF0000" fill="transparent" stroke-width="1" transform="scale(-1,1) translate(-250,0)"></path>
</defs>
<use xlink:href="#thePath"></use>
<text stroke="#000000" font-size="20">
<textPath xlink:href="#thePath" startOffset="7%">
Some text here
</textPath>
</text>
</svg>
I hope this is what you need
I have the Main.svg and the Template.svg files.
I want to programmatically insert Template.svg into Main.svg.
For this:
In Inskape I place the Template in a specific place and remember the coordinates
In Template.svg - set the specified coordinates
After the programmatically insertion, I get the Template offset from the position at which it should be located (-25.1632)
What could be the problem? The coordinates of the template inserted into Inskape and the coordinates of the template inserted programmatically match. Where is my mistake?
In Inskape:
Main.svg
<svg width="210mm" height="148mm" version="1.1" viewBox="0 0 210 148" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="#000">
<path d="m4.3752 45.005h197.92" stroke-width="2.0845"/>
<path d="m43.631 44.417 5.63e-4 -1.1146 0.0074-11.603" stroke-width=".81503"/>
<path d="m59.98 67.884 5.6e-4 -1.9765 7e-3 -20.575" stroke-width="1.0815"/>
<path d="m10.497 107.41h88.438" stroke-width="1.3934"/>
<path d="m58.872 107.49 2e-3 -0.59044 0.024-6.1464" stroke-width="1.0653"/>
<path d="m90.583 113.94 2e-3 -0.59044 0.024-6.1464" stroke-width="1.0653"/>
</g>
<g fill="none" stroke="#000">
<path d="m137.75 107.95 2e-3 -0.59045 0.024-6.1464" stroke-width="1.0653"/>
<path d="m169.46 114.4 2e-3 -0.59044 0.024-6.1464" stroke-width="1.0653"/>
<path d="m127.41 107.5h63.336" stroke-width="1.1792"/>
<path d="m137.77 67.877 5.6e-4 -1.9765 7e-3 -20.575" stroke-width="1.0815"/>
<path d="m101.25 44.632 5.7e-4 -1.1146 7e-3 -11.603" stroke-width=".81503"/>
<path d="m178.71 43.825 5.7e-4 -1.1146 7e-3 -11.603" stroke-width=".81503"/>
</g>
<!--<g> Place for the Template group </g>-->
</svg>
In Template change translate(-10.664053 22.731272) on translate(65.438 9.0453)
Template.svg
<g transform="translate(-10.664053 22.731272)">
<rect x="33.101" y="10.801" width="5.4464" height="7.1" fill="#fff"/>
<g fill="none" stroke="#102027" stroke-linecap="round">
<path d="m38.32 14.248h-5" stroke-width=".44444"/>
<g stroke-width=".4">
<path d="m35.82 5.6385v5" opacity=".98"/>
<path d="m35.82 17.869v5"/>
<path d="m37.07 10.74h-2.5"/>
<path d="m37.07 17.818h-2.5"/>
</g>
</g>
</g>
In Browser:
In the browser I see following code. If the translates (translate(65.438 9.0453)) are equal, why are the two elements not the same?
<svg>
...
<!--Inskape-->
<g transform="translate(65.438 9.0453)">
<rect x="33.101" y="10.801" width="5.4464" height="7.1" fill="#fff"/>
<g fill="none" stroke="#102027" stroke-linecap="round">
<path d="m38.32 14.248h-5" stroke-width=".44444"/>
<g stroke-width=".4">
<path d="m35.82 5.6385v5" opacity=".98"/>
<path d="m35.82 17.869v5"/>
<path d="m37.07 10.74h-2.5"/>
<path d="m37.07 17.818h-2.5"/>
</g>
</g>
</g>
<!--programmatically insert-->
<g transform="translate(65.438 9.0453)">
<rect x="7.9378" y="10.801" width="5.4464" height="7.1" fill="#fff"/>
<g fill="none" stroke="#102027" stroke-linecap="round">
<path d="m13.156 14.248h-5 " stroke-width=".4"/>
<g stroke-width=".4">
<path d="m10.656 5.6385v5" opacity=".98"/>
<path d="m10.656 17.869v5"/>
<path d="m11.906 10.74h-2.5"/>
<path d="m11.906 17.818h-2.5"/>
</g>
<title></title>
</g>
</g>
</svg>
I realized that there was no offset, it was necessary to place all the elements on one canvas. When copying elements from other canvases - there will be an offset.
Thanks Robert Longson for the tip.
<svg width="29px" height="29px" viewBox="36 168 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="checkbox" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(38.000000, 169.000000)">
<ellipse id="checkbox-circle" stroke="#F2B91A" stroke-width="3" cx="12.5" cy="13.5" rx="12.5" ry="12.5"></ellipse>
<g id="checkbox-checked" transform="translate(4.000000, 0.000000)" fill="#FFFFFF">
<path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745 M10.3519546,20.7619404 L0,20.7619404 L0,8.93617021e-05 L20.7039,8.93617021e-05 L20.7039,20.7619404 L10.3519546,20.7619404 L9.25523634e-06,20.7619404 L9.25523634e-06,4.17649403e-07 L20.7040592,4.17649403e-07 L20.7040592,20.7619404 L10.3519546,20.7619404 L10.3519546,20.7619404 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
Problem is that Safari renders a small border for the checkbox-checked g:
image link
Codepen: http://codepen.io/anon/pen/GjGmGE?editors=1000#0
Edit:
It was actually in the path. Other browsers just don't render it.
Proper path:
<g id="checkbox-checked" transform="translate(4.000000, 0.000000)" fill="#FFFFFF">
<path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745" id="Combined-Shape"></path>
</g>
The lines you are complaining about are actually a part of your path. If we draw it with a stroke instead of a fill, you can see what I mean.
<svg viewBox="36 168 29 29">
<g id="checkbox" stroke="black" stroke-width="0.2" fill="none" fill-rule="evenodd" transform="translate(38.000000, 169.000000)">
<g id="checkbox-checked" transform="translate(4.000000, 0.000000)">
<path d="M19.945968,0.293195745 C19.727568,0.141280851 19.486068,0.0470042553 19.229448,0.014387234 C18.587688,-0.0727404255 17.969868,0.241365957 17.620428,0.80747234 L8.299788,15.9252383 L3.003168,8.72089787 C2.693628,8.29866383 2.194248,8.04711064 1.668828,8.04711064 C1.293348,8.04711064 0.929628,8.17713191 0.645288,8.41394043 C0.291648,8.70749362 0.067368,9.13017447 0.012768,9.60468511 C-0.041832,10.0787489 0.079968,10.5465574 0.355908,10.9227702 L7.084308,20.0734085 C7.361088,20.4491745 7.758408,20.688217 8.163288,20.7387064 L8.229228,20.7494298 C8.297268,20.758366 8.364888,20.7619404 8.432088,20.7619404 C8.998248,20.7619404 9.522408,20.4607915 9.834048,19.9554511 L20.429808,2.76806809 C20.937168,1.94370638 20.720448,0.833834043 19.945968,0.293195745 M10.3519546,20.7619404 L0,20.7619404 L0,8.93617021e-05 L20.7039,8.93617021e-05 L20.7039,20.7619404 L10.3519546,20.7619404 L9.25523634e-06,20.7619404 L9.25523634e-06,4.17649403e-07 L20.7040592,4.17649403e-07 L20.7040592,20.7619404 L10.3519546,20.7619404 L10.3519546,20.7619404 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
Load the file into your editor and delete the extra lines.
We're currently developing our new website and we've decided to use some new SVG features.
On one of our project pages we have a SVG animation that follows the paths and draws the outline then fades into the final finished image. (see images below)
Our current problem is the SVG animation that draws the outlines don't display within Firefox, The final image fades in as planned and we have tested in other browsers such as Chrome, Safari and everything works how we envisioned it.
If anyone could point us in the right direction we'd greatly appreciate it. Thank you.
URL - http://labs.madebyanalogue.co.uk/analogue/work/lucky-voice-app.php
<figure>
<div class="drawings ipad">
<img class="illustration" src="../images/work/lucky-voice-app/lucky-voice-app_01.jpg" alt="App Icon" />
<svg class="line-drawing" id="ipad" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" >
<g>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1283.635,402.858
c143.279,0,259.429,116.15,259.429,259.429s-116.15,259.429-259.429,259.429c-27.602,0-53.474-3.967-78.427-11.951
c-0.422-0.135-1.563-0.615-1.983-0.751c-103.918-33.845-179.019-131.515-179.019-246.727
C1024.206,519.008,1140.356,402.858,1283.635,402.858z"/>
</g>
<g>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1282.706,506.785
c86.061,0,155.826,69.766,155.826,155.826s-69.766,155.826-155.826,155.826c-16.579,0-32.119-2.383-47.107-7.178
c-0.253-0.081-0.939-0.369-1.191-0.451c-62.418-20.329-107.528-78.995-107.528-148.197
C1126.88,576.551,1196.646,506.785,1282.706,506.785z"/>
</g>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1542.178,921.53l-518.028-0.139V402.91h518.34v468.332
c0,0,0.13,51.667,0.13,51.96C1542.622,923.495,1542.178,921.53,1542.178,921.53z"/>
<path display="none" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1577.545,728.638
c0.599-1.922,1.098-24.892,1.098-28.13c0-3.238,0.339-44.827,0.339-44.827H979.276c0,0-0.247,62.331-0.247,64.659
c0,2.328,0.247,9.552,0.247,9.552l68.194-1h529.676L1577.545,728.638z"/>
<g id="_x31_024_1_">
<g>
<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1448.534,362.935h-76.694h-253.605
c-74.395,0-134.703,60.312-134.703,134.705v330.295c0,74.394,60.309,134.705,134.703,134.705h330.299
c74.395,0,134.703-60.312,134.703-134.705V496.64C1583.237,422.247,1522.929,362.935,1448.534,362.935L1448.534,362.935z"/>
</g>
</g>
<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1246.419,844.098v-71.26h-73.208v-74.207h-72.561
V479.5h146.582v72.708h74.399V479.5h144.605v219.131h-71.689h-0.221c0,0-0.019,0.74-0.019,1.245s0.019,1.304,0.019,1.304v70.658
h-72.695v72.26H1246.419z"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1542.49,402.91l-519.979,519.979c0,0-39.178-36.889-39.178-97.555
V490c0,0,1.229-52.125,40.948-88.062c0,0,0.438,0.359,0.531,0.515c0.094,0.156,1.025,0.994,1.025,0.994l518.303,518.303"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1467.281,963.015V363.309h-73.211h-294.337
v597.87l0.238,0.399C1101.867,962.177,1467.281,963.015,1467.281,963.015z"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1320.359,962.015V362.309h-13.681h-58.024v597.87
l-0.952,0.399C1248.083,961.177,1320.359,962.015,1320.359,962.015z"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M984.654,700.014h599.706v-14.681V625.31H983.333
L984.654,700.014z"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M984.142,845.448h599.706l-0.488-72.723V478.388H985.49l-0.399,0.238
C984.493,480.522,984.142,845.448,984.142,845.448z"/>
</svg>
</div>
</figure>