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
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.
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?