SVG-animation not playing - svg
I made a svg-animation within a 3rd party tool and checked it in the browser: worked. When I try to embed it now in my html-file, the initial "status" is shown, but the animation doesn't play - neither as img-tag, svg direct embed or object:
https://codepen.io/daiaiai/pen/VbwLPR
The svg is like that (sorry for the mess, but as said, it's a 3rd party tool to create that)
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Keyshape -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 240" text-rendering="geometricPrecision" shape-rendering="geometricPrecision" style="white-space: pre;">
<path d="M9.984,-11.04L12.336,-11.04C12.9227,-11.04,13.2267,-10.736,13.248,-10.128L13.68,0L11.376,0L11.008,-9.136L10.736,-9.136L9.072,-2.304C8.96533,-1.78133,8.63467,-1.52,8.08,-1.52L6.48,-1.52C5.92533,-1.52,5.59467,-1.78133,5.488,-2.304L3.808,-9.136L3.536,-9.136L3.216,0L0.912,0L1.312,-10.128C1.344,-10.736,1.648,-11.04,2.224,-11.04L4.576,-11.04C5.09867,-11.04,5.41867,-10.7787,5.536,-10.256L6.88,-4.752C6.96533,-4.4,7.06133,-3.88267,7.168,-3.2L7.376,-3.2C7.38667,-3.25333,7.42667,-3.472,7.496,-3.856C7.56533,-4.24,7.62133,-4.53867,7.664,-4.752L8.992,-10.256C9.12,-10.7787,9.45067,-11.04,9.984,-11.04Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path d="M15.5381,-7.728L15.7621,-6.128C17.1061,-6.21333,18.2155,-6.256,19.0901,-6.256C19.5915,-6.256,19.9301,-6.18667,20.1061,-6.048C20.2821,-5.90933,20.3755,-5.63733,20.3861,-5.232L20.3861,-4.88L17.5701,-4.88C16.8128,-4.88,16.2208,-4.704,15.7941,-4.352C15.3675,-4,15.1541,-3.50933,15.1541,-2.88L15.1541,-2.08C15.1541,-1.36533,15.3941,-0.808,15.8741,-0.408C16.3541,-0.008,16.9728,0.192,17.7301,0.192C18.8821,0.192,19.8528,-0.272,20.6421,-1.2L20.8821,0L22.7541,0L22.7541,-5.216C22.7541,-6.28267,22.5035,-7.032,22.0021,-7.464C21.5008,-7.896,20.7168,-8.112,19.6501,-8.112C18.3275,-8.112,16.9568,-7.984,15.5381,-7.728ZM17.4901,-2.4L17.4901,-2.704C17.4901,-3.19467,17.7461,-3.44533,18.2581,-3.456L20.3861,-3.456L20.3861,-2.352C19.7141,-1.84,19.0581,-1.584,18.4181,-1.584C17.7995,-1.584,17.4901,-1.856,17.4901,-2.4Z" fill="#ffffff" stroke="none" fill-rule="evenodd" transform="translate(91,115.6)"/>
<path id="_a0" d="M27.0163,-11.2L27.0163,-8.464C27.0163,-7.92,26.9683,-7.37067,26.8722,-6.816C27.9709,-7.68,29.0483,-8.112,30.1042,-8.112C30.8189,-8.112,31.3656,-7.92533,31.7443,-7.552C32.1229,-7.17867,32.3122,-6.63467,32.3122,-5.92L32.3122,0L29.9603,0L29.9603,-5.184C29.9603,-5.536,29.9043,-5.77867,29.7922,-5.912C29.6803,-6.04533,29.4803,-6.112,29.1922,-6.112C28.6269,-6.112,27.8962,-5.872,27.0002,-5.392L27.0002,0L24.6322,0L24.6322,-11.2Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path id="_a1" d="M34.1944,-7.728L34.4184,-6.128C35.7624,-6.21333,36.8717,-6.256,37.7464,-6.256C38.2477,-6.256,38.5864,-6.18667,38.7624,-6.048C38.9384,-5.90933,39.0317,-5.63733,39.0424,-5.232L39.0424,-4.88L36.2264,-4.88C35.469,-4.88,34.877,-4.704,34.4504,-4.352C34.0237,-4,33.8104,-3.50933,33.8104,-2.88L33.8104,-2.08C33.8104,-1.36533,34.0504,-0.808,34.5304,-0.408C35.0104,-0.008,35.629,0.192,36.3864,0.192C37.5384,0.192,38.509,-0.272,39.2984,-1.2L39.5384,0L41.4104,0L41.4104,-5.216C41.4104,-6.28267,41.1597,-7.032,40.6584,-7.464C40.157,-7.896,39.373,-8.112,38.3064,-8.112C36.9837,-8.112,35.613,-7.984,34.1944,-7.728ZM36.1464,-2.4L36.1464,-2.704C36.1464,-3.19467,36.4024,-3.44533,36.9144,-3.456L39.0424,-3.456L39.0424,-2.352C38.3704,-1.84,37.7144,-1.584,37.0744,-1.584C36.4557,-1.584,36.1464,-1.856,36.1464,-2.4Z" fill="#ffffff" stroke="none" fill-rule="evenodd" transform="translate(91,115.6)"/>
<path d="M46.8725,-3.312L46.7765,-3.312L44.9045,0L42.4725,0L44.9045,-4.048L42.6485,-7.888L45.0645,-7.888L46.7445,-4.848L46.9045,-4.848L48.5845,-7.888L51.0005,-7.888L48.7445,-4.048L51.1765,0L48.7445,0Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path d="M64.7965,-11.04L67.1485,-11.04C67.7352,-11.04,68.0392,-10.736,68.0605,-10.128L68.4925,0L66.1885,0L65.8205,-9.136L65.5485,-9.136L63.8845,-2.304C63.7778,-1.78133,63.4472,-1.52,62.8925,-1.52L61.2925,-1.52C60.7378,-1.52,60.4072,-1.78133,60.3005,-2.304L58.6205,-9.136L58.3485,-9.136L58.0285,0L55.7245,0L56.1245,-10.128C56.1565,-10.736,56.4605,-11.04,57.0365,-11.04L59.3885,-11.04C59.9112,-11.04,60.2312,-10.7787,60.3485,-10.256L61.6925,-4.752C61.7778,-4.4,61.8738,-3.88267,61.9805,-3.2L62.1885,-3.2C62.1992,-3.25333,62.2392,-3.472,62.3085,-3.856C62.3778,-4.24,62.4338,-4.53867,62.4765,-4.752L63.8045,-10.256C63.9325,-10.7787,64.2632,-11.04,64.7965,-11.04Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path d="M77.8546,-7.888L77.8546,0L75.9826,0L75.8066,-1.088C74.7186,-0.224,73.6306,0.208,72.5426,0.208C71.06,0.208,70.3186,-0.522667,70.3186,-1.984L70.3186,-7.888L72.6866,-7.888L72.6866,-2.704C72.676,-2.36267,72.7346,-2.12267,72.8626,-1.984C72.9906,-1.84533,73.2146,-1.776,73.5346,-1.776C73.9933,-1.776,74.6493,-1.99467,75.5026,-2.432L75.5026,-7.888Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path id="_a2" d="M84.0281,-4.176L81.8041,-4.96C80.9828,-5.25867,80.3961,-5.664,80.0441,-6.176C79.6921,-6.688,79.5161,-7.36,79.5161,-8.192C79.5161,-9.408,79.8121,-10.2213,80.4041,-10.632C80.9961,-11.0427,82.0388,-11.248,83.5321,-11.248C84.9401,-11.248,86.1508,-11.104,87.1641,-10.816L87.0041,-9.152C86.0761,-9.184,84.9241,-9.2,83.5481,-9.2C82.9081,-9.2,82.4815,-9.144,82.2681,-9.032C82.0548,-8.92,81.9481,-8.64,81.9481,-8.192C81.9481,-7.82933,82.0281,-7.568,82.1881,-7.408C82.3481,-7.248,82.6521,-7.09333,83.1001,-6.944L85.1961,-6.224C86.0495,-5.92533,86.6521,-5.51733,87.0041,-5C87.3561,-4.48267,87.5321,-3.808,87.5321,-2.976C87.5321,-1.73867,87.2335,-0.898667,86.6361,-0.456C86.0388,-0.0133333,84.9721,0.208,83.4361,0.208C82.1881,0.208,80.9241,0.0693333,79.6441,-0.208L79.7881,-1.968C82.0601,-1.91467,83.2761,-1.888,83.4361,-1.888C84.0868,-1.888,84.5215,-1.95733,84.7401,-2.096C84.9588,-2.23467,85.0681,-2.52267,85.0681,-2.96C85.0681,-3.33333,84.9935,-3.59733,84.8441,-3.752C84.6948,-3.90667,84.4228,-4.048,84.0281,-4.176Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path d="M92.1105,-6.304L92.1105,-2.576C92.1105,-2.27733,92.1745,-2.06933,92.3025,-1.952C92.4305,-1.83467,92.6545,-1.776,92.9745,-1.776L93.9825,-1.776L94.2385,-0.128C93.6305,0.0853333,92.8892,0.192,92.0145,0.192C91.2998,0.192,90.7452,-0.008,90.3505,-0.408C89.9558,-0.808,89.7585,-1.36533,89.7585,-2.08L89.7585,-6.304L88.3665,-6.304L88.3665,-7.808L89.7585,-7.888L89.7585,-10.096L92.1105,-10.096L92.1105,-7.888L94.3025,-7.888L94.3025,-6.304Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path d="M97.7926,-3.152L100.641,-3.152C101.483,-3.152,102.094,-3.336,102.473,-3.704C102.851,-4.072,103.041,-4.624,103.041,-5.36C103.03,-6.288,102.731,-6.97867,102.145,-7.432C101.558,-7.88533,100.609,-8.112,99.2966,-8.112C97.846,-8.112,96.814,-7.80267,96.2006,-7.184C95.5873,-6.56533,95.2806,-5.48267,95.2806,-3.936C95.2806,-2.464,95.5953,-1.408,96.2246,-0.768C96.854,-0.128,97.91,0.192,99.3926,0.192C100.865,0.192,102.011,-0.00533333,102.833,-0.4L102.609,-1.872C101.489,-1.75467,100.507,-1.696,99.6646,-1.696C99.0353,-1.696,98.5846,-1.79467,98.3126,-1.992C98.0406,-2.18933,97.8673,-2.576,97.7926,-3.152ZM99.9846,-4.576L97.7446,-4.576C97.7766,-5.30133,97.9046,-5.784,98.1286,-6.024C98.3526,-6.264,98.7686,-6.384,99.3766,-6.384C99.8886,-6.384,100.241,-6.312,100.433,-6.168C100.625,-6.024,100.721,-5.76533,100.721,-5.392C100.721,-5.12533,100.67,-4.92267,100.569,-4.784C100.467,-4.64533,100.273,-4.576,99.9846,-4.576Z" fill="#ffffff" stroke="none" fill-rule="evenodd" transform="translate(91,115.6)"/>
<path d="M110.234,-8.112L109.994,-5.92L109.354,-5.92C108.831,-5.92,108.026,-5.73867,106.938,-5.376L106.938,0L104.57,0L104.57,-7.888L106.41,-7.888L106.618,-6.736C107.695,-7.65333,108.762,-8.112,109.818,-8.112Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path d="M113.255,-7.888L113.415,-6.736C114.417,-7.65333,115.42,-8.112,116.423,-8.112C117.489,-8.112,118.167,-7.68533,118.455,-6.832C119.383,-7.68533,120.343,-8.112,121.335,-8.112C122.049,-8.112,122.593,-7.92533,122.967,-7.552C123.34,-7.17867,123.527,-6.63467,123.527,-5.92L123.527,0L121.175,0L121.175,-5.184C121.175,-5.52533,121.116,-5.76533,120.999,-5.904C120.881,-6.04267,120.663,-6.112,120.343,-6.112C120.087,-6.112,119.841,-6.064,119.607,-5.968C119.372,-5.872,119.031,-5.68533,118.583,-5.408L118.583,0L116.311,0L116.311,-5.184C116.311,-5.52533,116.244,-5.76533,116.111,-5.904C115.977,-6.04267,115.761,-6.112,115.463,-6.112C115.047,-6.112,114.465,-5.88267,113.719,-5.424L113.719,0L111.367,0L111.367,-7.888Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path id="_a3" d="M127.878,-9.28L127.109,-9.28C126.757,-9.28,126.581,-9.456,126.581,-9.808L126.581,-10.736C126.581,-11.088,126.757,-11.264,127.109,-11.264L127.878,-11.264C128.23,-11.264,128.406,-11.088,128.406,-10.736L128.406,-9.808C128.406,-9.456,128.23,-9.28,127.878,-9.28Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path id="_a4" d="M130.79,-9.28L130.021,-9.28C129.669,-9.28,129.493,-9.456,129.493,-9.808L129.493,-10.736C129.493,-11.088,129.669,-11.264,130.021,-11.264L130.79,-11.264C131.142,-11.264,131.318,-11.088,131.318,-10.736L131.318,-9.808C131.318,-9.456,131.142,-9.28,130.79,-9.28Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path id="_a5" d="M125.397,-7.728L125.621,-6.128C126.965,-6.21333,128.075,-6.256,128.949,-6.256C129.451,-6.256,129.79,-6.18667,129.965,-6.048C130.141,-5.90933,130.235,-5.63733,130.245,-5.232L130.245,-4.88L127.429,-4.88C126.672,-4.88,126.08,-4.704,125.654,-4.352C125.227,-4,125.013,-3.50933,125.013,-2.88L125.013,-2.08C125.013,-1.36533,125.253,-0.808,125.733,-0.408C126.213,-0.008,126.832,0.192,127.59,0.192C128.742,0.192,129.712,-0.272,130.501,-1.2L130.742,0L132.613,0L132.613,-5.216C132.613,-6.28267,132.363,-7.032,131.861,-7.464C131.36,-7.896,130.576,-8.112,129.51,-8.112C128.187,-8.112,126.816,-7.984,125.397,-7.728ZM127.35,-2.4L127.35,-2.704C127.35,-3.19467,127.605,-3.44533,128.117,-3.456L130.245,-3.456L130.245,-2.352C129.574,-1.84,128.918,-1.584,128.277,-1.584C127.659,-1.584,127.35,-1.856,127.35,-2.4Z" fill="#ffffff" stroke="none" fill-rule="evenodd" transform="translate(91,115.6)"/>
<path d="M136.412,-7.888L136.588,-6.72C137.729,-7.648,138.854,-8.112,139.964,-8.112C140.678,-8.112,141.225,-7.92533,141.604,-7.552C141.982,-7.17867,142.172,-6.63467,142.172,-5.92L142.172,0L139.82,0L139.82,-5.184C139.82,-5.536,139.764,-5.77867,139.652,-5.912C139.54,-6.04533,139.34,-6.112,139.052,-6.112C138.55,-6.112,137.82,-5.872,136.86,-5.392L136.86,0L134.492,0L134.492,-7.888Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path d="M145.99,-7.888L146.166,-6.72C147.307,-7.648,148.432,-8.112,149.542,-8.112C150.256,-8.112,150.803,-7.92533,151.182,-7.552C151.56,-7.17867,151.75,-6.63467,151.75,-5.92L151.75,0L149.398,0L149.398,-5.184C149.398,-5.536,149.342,-5.77867,149.23,-5.912C149.118,-6.04533,148.918,-6.112,148.63,-6.112C148.128,-6.112,147.398,-5.872,146.438,-5.392L146.438,0L144.07,0L144.07,-7.888Z" fill="#ffffff" stroke="none" transform="translate(91,115.6)"/>
<path id="_a6" d="M0,0L7,0" stroke="#dbfe32" fill="none" stroke-linecap="square" opacity="0" transform="translate(116,118.64)"/>
<path id="_a7" d="M0,0L7,0" stroke="#dbfe32" fill="none" stroke-linecap="square" opacity="0" transform="translate(125.294,118.64)"/>
<path id="_a8" d="M0,0L7,0" stroke="#dbfe32" fill="none" stroke-linecap="square" opacity="0" transform="translate(171.5,118.64)"/>
<path id="_a9" d="M0,0L7,0" stroke="#dbfe32" fill="none" stroke-linecap="square" opacity="0" transform="translate(216.147,118.64)"/>
<path id="_a10" d="M87.0383,84.5262L83.5894,81.0771L86.05,79.6556C86.2421,79.5445,86.3541,79.3334,86.338,79.112C86.3221,78.8905,86.1811,78.6976,85.9748,78.6154L75.0023,74.2385C74.7871,74.1526,74.5416,74.2032,74.3777,74.3669C74.2139,74.5308,74.1634,74.7763,74.2492,74.9914L78.6255,85.9653C78.7077,86.1713,78.9006,86.3125,79.1221,86.3286C79.3436,86.3447,79.5547,86.2325,79.6657,86.0403L81.0869,83.5798L84.5357,87.0289C84.6442,87.1377,84.7918,87.1986,84.9456,87.1986C85.0993,87.1986,85.2465,87.1377,85.3552,87.0289L87.0383,85.3457C87.2645,85.1194,87.2645,84.7524,87.0383,84.5262ZM84.9456,85.7995L81.3724,82.2262C81.263,82.1168,81.1154,82.0563,80.9628,82.0563C80.9377,82.0563,80.9123,82.058,80.8872,82.0614C80.7084,82.0848,80.5509,82.1901,80.4608,82.3462L79.2596,84.4259L75.8255,75.815L84.4358,79.2495L82.3556,80.451C82.1995,80.5411,82.0944,80.6986,82.0708,80.8773C82.0474,81.0558,82.1081,81.2353,82.2356,81.3626L85.8088,84.936Z" fill="#000000" opacity="0" transform="translate(-161.988,-162.359) translate(206.78,206.802)"/>
<script><![CDATA[var ids=['_a0','_a1','_a2','_a3','_a4','_a5','_a6','_a7','_a8','_a9','_a10'];var anims=[[[16,0,600,[0,500,600],[16777215,16777215,14417458],[[-3,1],[-3,1],[-3,1]]]],[[16,0,900,[0,800,900],[16777215,16777215,14417458],[[-3,1],[-1],[-3,1]]]],[[16,0,2100,[0,2000,2100],[16777215,16777215,14417458],[[-3,1],[-3,1],[-3,1]]]],[[16,0,2900,[0,2800,2900],[16777215,16777215,14417458],[[-3,1],[-3,1],[-3,1]]]],[[16,0,2900,[0,2800,2900],[16777215,16777215,14417458],[[-3,1],[-3,1],[-3,1]]]],[[16,0,2900,[0,2800,2900],[16777215,16777215,14417458],[[-3,1],[-3,1],[-3,1]]]],[[8,0,600,[0,500,600],[0,0,1]]],[[8,0,1000,[0,500,600,700,1000],[0,0,0,0,1]]],[[8,0,2200,[0,500,600,2000,2200],[0,0,0,0,1]]],[[8,0,2900,[0,500,600,2800,2900],[0,0,0,0,1]]],[[1,600,2700,[0,400,1100,1500,2000,2300,2500,2700],[-161.988,-150.988,-150.988,-105.988,-105.988,-60.9876,-60.9876,-33.9876]],[2,600,2700,[0,400,1100,1500,2000,2300,2500,2700],[-162.359,-162.359,-162.359,-162.359,-162.359,-162.359,-162.359,-160.999]],[1,206.78],[2,206.802],[8,0,3200,[0,500,600,3100,3200],[0,0,1,1,0]]]];var end=3300;var t="- translate translate scale scale skewX skewY rotate opacity stroke-opacity fill-opacity stroke-width stroke-miterlimit stroke-dasharray stroke-dashoffset stroke fill d".split(" "),u=[0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,2,2,4];
(function(){function v(){0>q&&(q=(new Date).getTime());for(var c=(new Date).getTime()-q+x,a,e=r.length,d=0;d<e;++d){for(var b=r[d],g="",k=anims[d].length,m=0;m<k;++m){var f=anims[d][m],h=f[0];if(2==f.length)a=f[1];else{a=f[1];var l=f[3].length,n=f[3][l-1];a=c<=a?f[4][0]:0<=f[2]&&c>=a+f[2]?0!=n&&f[2]%n?w(f[2]%n,f):f[4][l-1]:w((c-a)%n,f)}0==h?(a=a*f[7]/100,h=f[6].getPointAtLength(a),g+="translate("+h.x+","+h.y+") ",f[8]&&(a?a=f[6].getPointAtLength(a-.001):(a=h,h=f[6].getPointAtLength(.001)),g+="rotate("+
180*Math.atan2(h.y-a.y,h.x-a.x)/Math.PI+") ")):7>=h?(f=t[h]+"(",f=3>h?f+(h&1?a+",0":"0,"+a):5>h?f+(h&1?a+",1":"1,"+a):f+a,g+=f+") "):(f=b,l=t[h],h=y(u[h],a),f.getAttribute("id"),f.setAttribute(l,h))}""!=g&&(b.getAttribute("id"),b.setAttribute("transform",g))}(0>end||c<end)&&p(v)}function m(c){return 0<=c?Math.pow(c,1/3):-Math.pow(-c,1/3)}function z(c,a,e,d){if(0==c)return 0==a?a=-d/e:(c=Math.sqrt(e*e-4*a*d),d=(-e+c)/(2*a),0<=d&&1>=d?a=d:(d=(-e-c)/(2*a),a=0<=d&&1>=d?d:0)),a;var b=e/c-a*a/(c*c)/3;e=
a*a*a/(c*c*c)/13.5-a*e/(c*c)/3+d/c;var g=e*e/4+b*b*b/27;a=-a/(3*c);if(0>=g)if(b||e){c=Math.sqrt(e*e/4-g);d=Math.acos(-e/2/c);e=Math.cos(d/3);d=Math.sqrt(3)*Math.sin(d/3);c=m(c);b=2*c*e+a;if(0<=b&&1>=b)return b;b=-c*(e+d)+a;if(0<=b&&1>=b)return b;b=c*(d-e)+a;if(0<=b&&1>=b)return b}else return-m(d/c);else{c=m(-e/2+Math.sqrt(g));e=m(-e/2-Math.sqrt(g));d=c+e+a;if(0<=d&&1>=d)return d;d=-(c+e)/2+a;if(0<=d&&1>=d)return d}return 0}function y(c,a){if(2==c&&"number"===typeof a)return"#"+("000000"+a.toString(16)).substr(-6);
if(3==c)return a.join(",");if(4==c){for(var e="",d=a.length,b=0;b<d;)if(0==a[b])e+="M"+a[b+1]+","+a[b+2],b+=3;else if(1==a[b])e+="L"+a[b+1]+","+a[b+2],b+=3;else if(2==a[b])e+="C"+a[b+1]+","+a[b+2]+","+a[b+3]+","+a[b+4]+","+a[b+5]+","+a[b+6],b+=7;else if(3==a[b])e+="Z",b+=1;else break;return e}return a}function A(c,a,e,d){if(0==c)return(e-a)*d+a;if(1==c)return 1>d?a:e;if(2==c){if("number"===typeof a&&"number"===typeof e){c=1-d;var b;return c*(a>>16)+d*(e>>16)<<16|c*(a>>8&255)+d*(e>>8&255)<<8|c*(a&
255)+d*(e&255)}return 1>d?a:e}if(3==c){0==a.length&&(a=[0]);0==e.length&&(e=[0]);c=a.length;a.length!=e.length&&(c=a.length*e.length);for(var g=Array(c),k=0;k<c;++k)b=a[k%a.length],b=(e[k%e.length]-b)*d+b,0>b&&(b=0),g[k]=b;return g}if(4==c){c=a.length;g=Array(c);for(k=0;k<c;++k)g[k]=(e[k]-a[k])*d+a[k];return g}return 0}function w(c,a){var e;a:{e=a[3].length;for(var d=0;d<e;++d)if(c<a[3][d]){e=d;break a}--e}var d=a[3][e-1],b=(c-d)/(a[3][e]-d);if(5<a.length&&a[5].length>e-1)if(d=a[5][e-1],0<=d[0])if(0>=
b)b=0;else if(1<=b)b=1;else var g=d[0],k=d[2],b=z(3*g-3*k+1,-6*g+3*k,3*g,-b),b=3*b*(1-b)*(1-b)*d[1]+3*b*b*(1-b)*d[3]+b*b*b;else-1!=d[0]&&(-2==d[0]?b=Math.ceil(b):-3==d[0]&&(b=Math.floor(b)));return A(u[a[0]],a[4][e-1],a[4][e],b)}var p=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||null;p||(p=function(c){window.setTimeout(c,16)});for(var x=0,q=-1,r=Array(ids.length),l=0;l<ids.length;++l)r[l]=
document.getElementById(ids[l]);anims.forEach(function(c){if(0==c[0][0]){var a=document.createElementNS("http://www.w3.org/2000/svg","path");a.setAttribute("d",c[0][6]);c[0][8]=" "==c[0][6].charAt(0);c[0][7]=a.getTotalLength();c[0][6]=a}});p(v)})();
]]></script>
</svg>
What do I do wrong there?
thanks
Related
SVG text textlength not working on Mobile Safari
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:
Why does Safari render svg g with edge/border?
<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.
SVG mask not working
I have an SVG vector object that consists of a few paths, some of which need to be masked. For this I've made 5 SVG masks. All of them seem to be working (i.e. masking their respective object), except for one! I'm probably missing something obvious, but I'm not seeing it. In short: how do I get the visible element within the circle to be properly masked? Any pointers would be hugely appreciated. The object is up at this pen: http://codepen.io/anon/pen/LNYOya SVG code: <svg version="1.1" id="het-lekkerste-van" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="504.789px" height="186.027px" viewBox="0 0 504.789 186.027" enable-background="new 0 0 504.789 186.027" xml:space="preserve"> <defs> <g id="l-masks"> <mask id="mask-l-3"> <path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M59.644,94.138 c0,0,70.4-35.679,57.122-49.875"/> </mask> <mask id="mask-l-2-2"> <path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M117.631,45.638 c0,0-12.5-12.875-25,29.75"/> </mask> <mask id="mask-l-2-1"> <path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M92.144,74.763c0,0-16.375,62-41.75,59.5"/> </mask> <mask id="mask-l-1-2"> <path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M53.644,134.263 c0,0-8.5,0.25-8-7.5c0,0,0.5-10.875,27.25-7.75"/> </mask> <mask id="mask-l-1-1"> <path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M73.519,118.638 c0,0,19.25,4.25,20.375,5.125c0,0,13.875,2.625,17,0.75c0,0,16.875-3.625,28.125-20.25"/> </mask> </g> <mask id="mask-cirkel"> <path fill="none" stroke="#ffffff" stroke-width="9" stroke-miterlimit="10" d="M3.6829999999999927,93.014a89.013,89.013 0 1,0 178.026,0a89.013,89.013 0 1,0 -178.026,0"/> </mask> </defs> <path id="cirkel" style="mask: url(#mask-cirkel);" d="M92.696,186.027c-51.288,0-93.013-41.726-93.013-93.014S41.409,0,92.696,0s93.013,41.727,93.013,93.015 S143.984,186.027,92.696,186.027z M92.696,8C45.82,8,7.683,46.137,7.683,93.014s38.137,85.014,85.013,85.014 s85.013-38.137,85.013-85.014S139.573,8,92.696,8z"/> <g id="l"> <path id="l-1-1" style="mask: url(#mask-l-1-1);" d="M118.746,42.38l-3.498,5.077c0.135,0.371,0.228,0.785,0.228,1.29c0,1.65-0.766,3.502-2.271,5.494 c-1.588,2.098-3.459,4.146-5.561,6.075c-2.14,1.962-4.335,3.812-6.527,5.482c-1.211,0.929-2.298,1.739-3.253,2.43c0,0,0,0,0,0.001 c-3.865,2.9-8.178,5.521-8.178,5.521s0,0,0-0.001l-0.001,0.001c-2.521,1.682-5.14,3.347-7.78,4.97 c-2.713,1.658-5.338,3.208-7.806,4.585c-2.527,1.424-4.851,2.702-6.899,3.815c-2.042,1.107-3.896,2.075-5.532,2.898 c-1.55,0.843-1.875,1.933-1.875,2.695c0,1.421,0.898,2.271,2.402,2.271c0.198,0,0.511-0.032,1.315-0.308l0.124-0.055 c2.767-1.469,6.344-3.409,10.936-5.924c3.87-2.13,7.981-4.514,12.254-7.1c0,0,3.608-2.058,8.171-5.201 c1.803-1.205,4.122-2.822,6.905-4.802c2.9-2.066,5.806-4.412,8.63-6.972c2.823-2.557,5.296-5.258,7.348-8.021 c2.117-2.846,3.188-5.67,3.188-8.385c0-2.021-0.543-3.74-1.62-5.114C119.234,42.836,118.996,42.599,118.746,42.38z"/> <path id="l-1-2" style="mask: url(#mask-l-1-2);" d="M97.864,68.228c0.496-1.402,1.083-2.975,1.756-4.702c1.073-2.747,2.342-5.44,3.771-7.994 c1.407-2.516,3.021-4.69,4.799-6.467c1.699-1.701,3.532-2.527,5.604-2.527c0.656,0,1.084,0.158,1.274,0.465 c0.08,0.131,0.124,0.299,0.18,0.454l3.498-5.077c-1.082-0.948-2.517-1.436-4.295-1.436c-3.45,0-6.563,1.297-9.253,3.849 c-2.591,2.461-4.9,5.469-6.861,8.944c-1.938,3.439-3.663,7.063-5.119,10.768c-1.433,3.649-2.59,6.678-3.532,9.244 c0.014-0.008,4.316-2.625,8.176-5.52C97.863,68.229,97.863,68.229,97.864,68.228z"/> <path id="l-2-1" style="mask: url(#mask-l-2-1);" d="M86.822,81.6c-0.608,1.686-1.287,3.558-2.038,5.631c-1.11,3.063-2.368,6.288-3.739,9.578 c-1.383,3.332-2.929,6.773-4.587,10.227c-1.564,3.256-3.271,6.333-5.078,9.163c0,0,0,0,0,0s-1.403,2.627-3.389,5.012l0,0 c0,0-0.001,0.001-0.001,0.001c-2.216,2.853-4.579,5.235-7.034,7.084c-2.675,2.015-5.534,3.042-8.5,3.079v5.547 c4.053-0.26,7.848-1.707,11.29-4.329c3.621-2.764,7.031-6.359,10.148-10.693c1.939-2.555,3.326-4.936,3.326-4.936 c1.71-2.868,3.364-5.915,4.928-9.076c1.76-3.563,3.426-7.209,4.958-10.843c1.524-3.621,2.968-7.261,4.291-10.828 c1.281-3.458,2.478-6.733,3.595-9.817C90.43,79.544,86.822,81.6,86.822,81.6z"/> <path id="l-2-2" style="mask: url(#mask-l-2-2);" d="M52.291,131.382c-1.178,0-2.102-0.348-2.819-1.061c-0.719-0.719-1.068-1.549-1.068-2.541 c0-1.418,0.448-2.518,1.372-3.369c0.998-0.914,2.239-1.623,3.694-2.102c1.507-0.502,3.077-0.84,4.667-1.003 c1.61-0.174,2.947-0.26,3.971-0.26c1.305,0,2.573,0.021,3.763,0.064c0.715,0.026,1.426,0.061,2.122,0.1 c1.985-2.385,3.388-5.011,3.388-5.011l0-0.001c-2.656-0.234-5.478-0.35-8.395-0.35c-1.783,0-3.841,0.18-6.118,0.537 c-2.293,0.36-4.485,0.975-6.511,1.829c-2.072,0.875-3.854,2.117-5.29,3.692c-1.495,1.646-2.256,3.777-2.256,6.348 c0,2.29,0.756,4.335,2.24,6.065c1.519,1.761,3.567,2.654,6.084,2.654c0.444,0,0.884-0.026,1.322-0.054v-5.547 C52.401,131.375,52.346,131.382,52.291,131.382z"/> <path id="l-3" style="mask: url(#mask-l-3);" d="M138.434,105.592c-0.596-0.531-1.269-0.799-1.997-0.799c-0.925,0-1.74,0.346-2.472,1.084 c-0.934,1.113-1.594,1.876-2.083,2.404c-0.52,0.563-0.994,1.06-1.426,1.49c-0.429,0.43-0.855,0.834-1.28,1.217 c-0.433,0.391-1.037,0.889-1.833,1.506c-4.298,3.696-8.269,6.258-11.805,7.621c-3.537,1.362-7.044,2.056-10.432,2.056 c-2.225,0-4.457-0.191-6.641-0.569c-2.228-0.383-4.533-0.876-6.849-1.466c-2.225-0.563-4.638-1.15-7.384-1.8 c-2.223-0.526-4.577-0.983-7.013-1.37c0,0-1.387,2.381-3.326,4.936c2.967,0.426,5.808,0.951,8.452,1.559 c2.845,0.66,5.584,1.323,8.144,1.974c2.651,0.67,5.217,1.229,7.627,1.655c2.476,0.448,5.003,0.67,7.516,0.67 c3.862,0,7.838-0.77,11.813-2.291c3.972-1.519,8.364-4.262,13.052-8.154c0.884-0.703,1.613-1.303,2.192-1.79 c0.582-0.5,1.154-1.019,1.7-1.562c0.568-0.575,1.178-1.229,1.808-1.949c0.659-0.745,1.519-1.729,2.533-2.919 c0.415-0.416,0.634-0.937,0.634-1.505C139.365,106.832,139.044,106.139,138.434,105.592z"/> </g> <g id="het"> <path d="M224.994,12.783h5.677v13.245h14.303V12.783h5.677v31.244h-5.677V30.913H230.67v13.114h-5.677L224.994,12.783 L224.994,12.783z"/> <path d="M262.725,12.783h18.702v4.885h-13.025v8.186h10.518v4.885h-10.518v8.405h13.729v4.885h-19.405V12.783z"/> <path d="M301.654,17.668H291.4v-4.885h26.185v4.885h-10.254v26.359h-5.677V17.668z"/> </g> <g id="lekkerste"> <path d="M224.994,75.983h5.677v26.358h13.511v4.886h-19.188V75.983z"/> <path d="M254.869,75.983h18.702v4.885h-13.025v8.186h10.519v4.885h-10.519v8.405h13.729v4.885h-19.406V75.983L254.869,75.983z"/> <path d="M286.329,75.983h5.677v12.718h4.049l7.35-12.718h6.161l-8.846,14.874v0.088l9.373,16.282h-6.381l-7.657-13.643h-4.049 v13.643h-5.677V75.983L286.329,75.983z"/> <path d="M320.957,75.983h5.678v12.718h4.048l7.35-12.718h6.161l-8.846,14.874v0.088l9.373,16.282h-6.381l-7.657-13.643h-4.048 v13.643h-5.678V75.983L320.957,75.983z"/> <path d="M355.583,75.983h18.702v4.885H361.26v8.186h10.518v4.885H361.26v8.405h13.729v4.885h-19.406V75.983z"/> <path d="M387.044,75.983h10.076c3.39,0,4.93,0.264,6.293,0.88c3.124,1.408,5.104,4.4,5.104,8.537c0,3.74-1.98,7.217-5.28,8.537 v0.088c0,0,0.439,0.439,1.057,1.54l6.425,11.662h-6.337l-6.205-11.662h-5.456v11.662h-5.677V75.983z M397.825,90.637 c3.036,0,4.93-1.805,4.93-4.93c0-2.992-1.276-4.84-5.722-4.84h-4.313v9.77H397.825L397.825,90.637z"/> <path d="M421.859,99.219c0,0,3.388,3.3,7.789,3.3c2.376,0,4.532-1.231,4.532-3.784c0-5.589-14.742-4.621-14.742-14.214 c0-5.193,4.489-9.065,10.474-9.065c6.161,0,9.329,3.346,9.329,3.346l-2.464,4.619c0,0-2.992-2.729-6.909-2.729 c-2.641,0-4.709,1.541-4.709,3.741c0,5.544,14.698,4.181,14.698,14.17c0,4.973-3.784,9.152-10.297,9.152 c-6.953,0-10.782-4.269-10.782-4.269L421.859,99.219z"/> <path d="M459.16,80.868h-10.254v-4.885h26.185v4.885h-10.253v26.359h-5.678V80.868z"/> <path d="M485.383,75.983h18.702v4.885h-13.025v8.186h10.518v4.885h-10.518v8.405h13.729v4.885h-19.405V75.983z"/> </g> <g id="van"> <path d="M220.989,139.184h6.117l6.864,20.375c0.615,1.804,1.145,4.576,1.188,4.576h0.088c0.044,0,0.572-2.772,1.188-4.576 l6.908-20.375h6.072l-11.396,31.244h-5.633L220.989,139.184z"/> <path d="M273.792,162.419h-10.958l-2.641,8.01h-5.854l11.002-31.244h5.94l11.002,31.244h-5.854L273.792,162.419z M268.291,144.596 c0,0-0.704,3.081-1.319,4.841l-2.772,8.36h8.186l-2.771-8.36c-0.572-1.76-1.232-4.841-1.232-4.841H268.291z"/> <path d="M292.445,139.184h5.677l11.838,18.042c1.188,1.805,2.597,4.841,2.597,4.841h0.088c0,0-0.308-2.992-0.308-4.841v-18.042 h5.633v31.244h-5.633l-11.839-17.999c-1.188-1.805-2.597-4.841-2.597-4.841h-0.088c0,0,0.309,2.992,0.309,4.841v17.999h-5.677 V139.184L292.445,139.184z"/> </g> </svg>
There seems to be something wrong with the path definition of your 1-2-1 mask. If you replace that path definition with path definition of the l-2-1 shape it works perfectly. I can't see what's wrong myself - the original path seems to be perfectly valid and draws just fine outside a mask.
SVG not working within Firefox
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>
Some elements not visible in browser in svg image
I have svg file exported from flash, I can open that file in Inkscape and I see clouds and a girl. In browsers the girl is visible but the clouds not. In svg they are the same symbol in defs with two groups, and a use element with xlink:href The cloud that are not visible look like this: <defs transform="matrix(1 0 0 1 0 0) "> <symbol id="Symbol__202" viewBox="0 0 94.9 52.4"> <g id="Warstwa.__202"> <g id="group1"> <path id="path27" fill="#FFFFFF" fill-opacity="1" d="M440.5,18.3 Q440.5,15 438.1,12.6 C436.55,11.05 434.7,10.3 432.5,10.3 430.25,10.3 428.35,11.05 426.75,12.6 426.15,13.25 425.65,14 425.25,14.8 425.2,11.1 423.85,7.95 421.25,5.35 418.6,2.7 415.35,1.35 411.5,1.35 407.75,1.35 404.55,2.7 401.9,5.35 400.35,6.9 399.3,8.6 398.65,10.45 397.3,9.6 395.75,9.2 394.05,9.2 392.6,9.2 391.25,9.5 390.05,10.15 389.9,7.8 388.95,5.8 387.3,4.1 385.5,2.25 383.3,1.35 380.7,1.35 378.15,1.35 375.9,2.25 374.05,4.1 372.8,5.4 371.95,6.85 371.55,8.5 368.95,6.85 366,6.05 362.7,6.05 358,6.05 353.95,7.7 350.6,11.05 347.25,14.45 345.6,18.5 345.6,23.25 345.6,27.95 347.25,32 350.6,35.45 353.95,38.8 358,40.45 362.7,40.45 366.9,40.45 370.55,39.1 373.7,36.45 372.1,38.4 371.3,40.65 371.3,43.2 371.3,46.1 372.3,48.55 374.35,50.6 376.5,52.7 379,53.75 381.85,53.75 384.75,53.75 387.25,52.7 389.35,50.6 391.4,48.55 392.45,46.1 392.45,43.2 392.45,42.65 392.4,42.2 392.35,41.75 393.3,41.3 394.25,40.7 395.15,40.05 395.7,42.65 397.05,44.95 399.1,47 402,49.9 405.5,51.35 409.55,51.35 413.65,51.35 417.15,49.9 420.05,47 421.05,46.05 421.85,45 422.5,43.85 423.65,44.25 424.85,44.45 426.1,44.45 429.1,44.45 431.65,43.35 433.75,41.2 435.9,39.1 437,36.55 437,33.55 437,30.7 436,28.25 434,26.15 435.55,25.85 436.9,25.1 438.1,23.95 439.7,22.4 440.5,20.55 440.5,18.3z M385.45,18.8 L385.45,18.9 385.35,18.9 385.45,18.8z M375.5,34.75 C375.7,34.45 375.9,34.2 376.15,34 376.2,34.05 376.25,34.1 376.25,34.25 376,34.4 375.75,34.6 375.5,34.75z"/> <path id="path28" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M440.5,18.3 Q440.5,15 438.1,12.6 C436.55,11.05 434.7,10.3 432.5,10.3 430.25,10.3 428.35,11.05 426.75,12.6 426.15,13.25 425.65,14 425.25,14.8 425.2,11.1 423.85,7.95 421.25,5.35 418.6,2.7 415.35,1.35 411.5,1.35 407.75,1.35 404.55,2.7 401.9,5.35 400.35,6.9 399.3,8.6 398.65,10.45 397.3,9.6 395.75,9.2 394.05,9.2 392.6,9.2 391.25,9.5 390.05,10.15 389.9,7.8 388.95,5.8 387.3,4.1 385.5,2.25 383.3,1.35 380.7,1.35 378.15,1.35 375.9,2.25 374.05,4.1 372.8,5.4 371.95,6.85 371.55,8.5 368.95,6.85 366,6.05 362.7,6.05 358,6.05 353.95,7.7 350.6,11.05 347.25,14.45 345.6,18.5 345.6,23.25 345.6,27.95 347.25,32 350.6,35.45 353.95,38.8 358,40.45 362.7,40.45 366.9,40.45 370.55,39.1 373.7,36.45 372.1,38.4 371.3,40.65 371.3,43.2 371.3,46.1 372.3,48.55 374.35,50.6 376.5,52.7 379,53.75 381.85,53.75 384.75,53.75 387.25,52.7 389.35,50.6 391.4,48.55 392.45,46.1 392.45,43.2 392.45,42.65 392.4,42.2 392.35,41.75 393.3,41.3 394.25,40.7 395.15,40.05 395.7,42.65 397.05,44.95 399.1,47 402,49.9 405.5,51.35 409.55,51.35 413.65,51.35 417.15,49.9 420.05,47 421.05,46.05 421.85,45 422.5,43.85 423.65,44.25 424.85,44.45 426.1,44.45 429.1,44.45 431.65,43.35 433.75,41.2 435.9,39.1 437,36.55 437,33.55 437,30.7 436,28.25 434,26.15 435.55,25.85 436.9,25.1 438.1,23.95 439.7,22.4 440.5,20.55 440.5,18.3z"/> <path id="path30" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M385.45,18.8 L385.35,18.9 385.45,18.9 385.45,18.8z"/> <path id="path35" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M375.5,34.75 C375.75,34.6 376,34.4 376.25,34.25 376.25,34.1 376.2,34.05 376.15,34 375.9,34.2 375.7,34.45 375.5,34.75z"/> </g> </g> </symbol> </defs> ... <use xlink:href="#Symbol__202" id="Symbol.__203" width="94.9" height="52.4" x="0" y="0" transform="matrix(1 0 0 1 813.15 14.5)" overflow="visible"/> and is the same as a girl <use xlink:href="#dziewczynka" id="dziewczynka1" width="80.1" height="187.8" x="-40.05" y="-93.9" transform="matrix(1 0 0 1 50 200)" overflow="visible"/> I tried to remove the dot from ID in the cloud but it didn't change anything. Why the clouds are not visible in the browser?