Could not play SVG animation once placed within webpage - javascript
I have created an animation using svgcircus.com, if I place it in webpage the animation doesn't play and just see static svg without animation but if I drag and drop SVG directly into browser then it plays:
Here is how I call it:
<img src="marker-with-wave.svg"/>
Here is my SVG:
<?xml version="1.0" standalone="no"?>
<!-- Generator: SVG Circus (http://svgcircus.com) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle id="actor_4" cx="50" cy="50" r="25" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_3" cx="50" cy="50" r="20" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_2" cx="50" cy="50" r="15" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_1" cx="50" cy="50" r="10" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<g transform="translate(20 -1020)">
<path style="fill:#00A0A0;" d="M30,1043.4c-5.523,0-10,4.477-10,10c0,1.776,0.477,3.438,1.289,4.882
c0.135,0.24,0.276,0.476,0.43,0.704L30,1073.4l8.281-14.414c0.127-0.189,0.237-0.389,0.351-0.586l0.079-0.118
c0.811-1.445,1.289-3.106,1.289-4.882C40,1047.877,35.522,1043.4,30,1043.4z M30,1048.4c2.761,0,5,2.239,5,5c0,2.761-2.239,5-5,5
c-2.761,0-5-2.239-5-5C25,1050.639,27.239,1048.4,30,1048.4z"/>
<path style="fill:#008282;" d="M30,1047.15c-3.452,0-6.25,2.798-6.25,6.25c0,3.451,2.798,6.25,6.25,6.25
c3.451,0,6.25-2.799,6.25-6.25C36.25,1049.948,33.451,1047.15,30,1047.15z M30,1049.65c2.071,0,3.75,1.679,3.75,3.75
s-1.679,3.75-3.75,3.75s-3.75-1.679-3.75-3.75S27.929,1049.65,30,1049.65z"/>
</g>
<script type="text/ecmascript"><![CDATA[(function(){var actors={};actors.actor_1={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_1"),type:"circle",cx:50,cy:50,dx:20,dy:32,opacity:1};actors.actor_2={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_2"),type:"circle",cx:50,cy:50,dx:30,dy:30,opacity:1};actors.actor_3={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_3"),type:"circle",cx:50,cy:50,dx:40,dy:30,opacity:1};actors.actor_4={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_4"),type:"circle",cx:50,cy:50,dx:50,dy:30,opacity:1};var tricks={};tricks.trick_1=(function(_,t){t=(function(n){return--n*n*n+1})(t)%1,t=0>t?1+t:t;var i;i=0.00>=t?1+(0.5-1)/0.00*t:t>=0.13?0.5-(t-0.13)*((0.5-1)/(1-0.13)):0.5;var a=_._tMatrix,r=-_.cx*i+_.cx,x=-_.cy*i+_.cy,c=a[0]*i,n=a[1]*i,M=a[2]*i,f=a[3]*i,g=a[0]*r+a[2]*x+a[4],m=a[1]*r+a[3]*x+a[5];_._tMatrix[0]=c,_._tMatrix[1]=n,_._tMatrix[2]=M,_._tMatrix[3]=f,_._tMatrix[4]=g,_._tMatrix[5]=m});tricks.trick_2=(function(t,i){i=(function(n){return.5>n?2*n*n:-1+(4-2*n)*n})(i)%1,i=0>i?1+i:i;var _=t.node;0.1>=i?_.setAttribute("opacity",i*(t.opacity/0.1)):i>=0.2?_.setAttribute("opacity",t.opacity-(i-0.2)*(t.opacity/(1-0.2))):_.setAttribute("opacity",t.opacity)});var scenarios={};scenarios.scenario_1={actors: ["actor_1","actor_2","actor_3","actor_4"],tricks: [{trick: "trick_1",start:0,end:1.00},{trick: "trick_2",start:0,end:1}],startAfter:0,duration:2000,actorDelay:100,repeat:0,repeatDelay:1000};var _reqAnimFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame,fnTick=function(t){var r,a,i,e,n,o,s,c,m,f,d,k,w;for(c in actors)actors[c]._tMatrix=[1,0,0,1,0,0];for(s in scenarios)for(o=scenarios[s],m=t-o.startAfter,r=0,a=o.actors.length;a>r;r++){if(i=actors[o.actors[r]],i&&i.node&&i._tMatrix)for(f=0,m>=0&&(d=o.duration+o.repeatDelay,o.repeat>0&&m>d*o.repeat&&(f=1),f+=m%d/o.duration),e=0,n=o.tricks.length;n>e;e++)k=o.tricks[e],w=(f-k.start)*(1/(k.end-k.start)),tricks[k.trick]&&tricks[k.trick](i,Math.max(0,Math.min(1,w)));m-=o.actorDelay}_reqAnimFrame(fnTick)};_reqAnimFrame(fnTick);})()]]></script>
</svg>
Instead of <img /> if I use <object></object> SVG is animation is working.
<object type="image/svg+xml" data="marker-with-wave.svg">
Your browser does not support SVG
</object>
Related
<use> - SVG: Stroke of Circle overriding stroke of use element
Stroke of both <use> element ignored here. The stroke color of <circle> is set blue which is appearing on both <use> element too. Why? I want different strock color of all of 3 these element. but it is not working. <svg width="300" class="svg-elem" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/> <use class="circle1" href="#myCircle" x="10" stroke="grey" fill="blue"/> <use href="#myCircle" x="20" fill="white" stroke="red"/> </svg>
Because circle still overriding the <use>. You can consider using CSS variable to control stroke color like below. <svg width="300" class="svg-elem" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="myCircle" cx="5" cy="5" r="4" style="stroke:var(--stroke, blue)"/> <use class="circle1" href="#myCircle" x="10" style="--stroke:gray;" fill="blue"/> <use href="#myCircle" x="20" fill="white" style="--stroke:red;"/> </svg>
Insert SVG document into HTML dynamically using JavaScript?
How can I dynamically insert an SVG into HTML?
The problem right now is that the SVG is a document, and I can only find how to insert nodes. I have tried some different things to convert the SVG to a node, but have not found anything that works.
const svgDoc = new DOMParser().parseFromString(svgText, "text/html");
window.document.querySelector("#container").appendChild(svgDoc);
const svgText = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
<title>My First Scalable Vector Graphic</title>
<desc>An experimental SVG from SitePoint.com</desc>
<g id="main">
<line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" />
<polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" />
<rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />
<circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />
<ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />
<text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
</g>
</svg>
`;
<div id="container"></div>
Use document.documentElement to get the root element of a document.
const svgText = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
<title>My First Scalable Vector Graphic</title>
<desc>An experimental SVG from SitePoint.com</desc>
<g id="main">
<line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" />
<polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" />
<rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />
<circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />
<ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />
<text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
</g>
</svg>
`;
const svgDoc = new DOMParser().parseFromString(svgText, "image/svg+xml");
window.document.querySelector("#container").appendChild(svgDoc.documentElement);
<div id="container"></div>
SVG Element, HTML and JavaScript
I'm Creating a SVG elements but I want to make it clickable and change the color of it on click Here's the code of the elements <svg version="1.1" x="0px" y="0px" width="960px" height="560px" viewBox="0 0 960 560" style="disable-background:new 0 0 960 560;" xml:space="preserve"> <g id="Layer_1"> <rect x="95.675" y="35.61" class="st0" width="774.026" height="494.805"/> </g> <g id="Layer_2"> <circle class="st1" cx="254.766" cy="144.67" r="68.182"/> <circle class="st1" cx="474.571" cy="144.67" r="68.182"/> <circle class="st1" cx="685.766" cy="144.67" r="68.182"/> <ellipse class="st1" cx="474.571" cy="318.727" rx="167.695" ry="76.623"/> <circle class="st1" cx="324.748" cy="463.532" r="47.403"/> <circle class="st1" cx="477.565" cy="463.532" r="47.403"/> <circle class="st1" cx="624.395" cy="463.532" r="47.403"/> </g> </svg>
As an example: changing an element's color on click:
$('#Layer_1').click( function() {
$('#Layer_1').css({ fill: "blue" });
});
You can build you idea from this.
Here is a working example: https://jsfiddle.net/ddan/bcLzp929/1/
Change an inline SVG's x and y with ecmascript
I am using an inline SVG in an SVG and have set some default x and y values. When I change them, the inline SVG moves accordingly. I am trying to change it with
var inlineSVG = document.getElementById("inlineSVG");
inlineSVG.style.x = "90";
and that adds style="x:90px;" but that doesn't actually affect the element.
It's weird (in my head) because this works with a rect but not with an svg.
Here is my actual code:
<?xml version='1.0' encoding='UTF-8'?>
<svg width='1000' height='360'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink="http://www.w3.org/1999/xlink"
onload='init(evt)'
>
<script type='text/ecmascript'>
function init(event){
var wing1 = document.getElementById("wing1");
wing1.style.x = "90";
}
</script>
<circle cx="200" cy="140" r="5" fill="red" />
<circle cx="220" cy="170" r="5" fill="red" />
<circle cx="180" cy="170" r="5" fill="red" />
<circle cx="220" cy="220" r="5" fill="red" />
<circle cx="180" cy="220" r="5" fill="red" />
<svg id="wing1" x="280" y="100" viewBox="0 0 350 300">
<g>
<g>
<g>
<ellipse fill="#E6E7E8" cx="229.505" cy="117.813" rx="5.862" ry="4.547"/>
</g>
<g>
<ellipse fill="#E6E7E8" cx="265.931" cy="117.819" rx="5.862" ry="4.547"/>
</g>
</g>
<g>
<g>
<ellipse fill="#E6E7E8" cx="229.191" cy="125.538" rx="5.862" ry="4.547"/>
</g>
<g>
<ellipse fill="#E6E7E8" cx="265.617" cy="125.531" rx="5.861" ry="4.547"/>
</g>
</g>
</g>
<ellipse fill="#E6E7E8" cx="247.244" cy="121.796" rx="20.635" ry="38.017"/>
</svg>
<rect id="square" x="0" y="470" width="50" height="50" fill="#BADA55" style="fill-opacity : 0.5" />
<line x1="0" y1="0" x2="1000" y2="360" style="stroke: yellowgreen;
stroke-width: 1;
stroke-dasharray: 10 1;"></line>
<line x1="0" y1="360" x2="1000" y2="0" style="stroke: yellowgreen;
stroke-width: 1;
stroke-dasharray: 10 1;"></line>
I tried adding !important to the value but it didn't work ( because I guess it doesn't count it as a valid number? ).
The solution is to directly change the x attribute like so:
selector.setAttribute("attr",val);
How can I implement eraser function in SVG?
I think SVG is better than HTML5 canvas for some features, but I can't imagine an easy way to make eraser function. I there any way or any example?
This is a really janky way of doing it, but you could simply mimic your standard pen tool with a white stroke.
After looking at many examples (including Geert Bellemans answer here), I finally came up with this code that works. To use the Eraser, you draw new circles and append them inside the node. To draw new lines/shapes, you append them inside the node. Here it is: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="638px"> <mask id="mask_1"> <rect width="100%" height="100%" fill="#fff"></rect> <circle cx="223" cy="122" r="8" stroke="#000" stroke-width="0px" fill="#000"></circle> <circle cx="222" cy="124" r="8" stroke="#000" stroke-width="0px" fill="#000"></circle> <circle cx="221" cy="125" r="8" stroke="#000" stroke-width="0px" fill="#000"></circle> <circle cx="220" cy="126" r="8" stroke="#000" stroke-width="0px" fill="#000"></circle> <circle cx="220" cy="127" r="8" stroke="#000" stroke-width="0px" fill="#000"></circle> </mask> <g mask="url(#mask_1)"> <polyline fill="none" points=" 210,149 212,148 213,144 215,142 216,139 219,135 220,133 224,128 226,126 229,121 233,117 237,112 243,107 248,103 253,99 258,96 263,92 268,90 271,88 272,87 273,87 274,87 275,86 275,85 276,85 277,85 278,85 279,85 280,84 " stroke="#ff0000" stroke-width="4"></polyline> </g> </svg>
You could use the clipPath element. Put your eraser drawing inside a clipPath element and clip the drawing you want to overlay with the eraser. This way the background stays visible. <clipPath id="test"> <polyline points="298,351 302,350 307,347 313,343 320,339 329,336 343,332 357,328 374,325 389,321 402,320 416,319 428,317 439,316 447,314 455,313 462,312 467,312 471,312 478,310 482,310 485,310 486,310 487,309 490,309 491,309 493,309 494,308 495,308 497,308 497,306 499,304 501,301 502,298 504,294 505,290 506,287 508,283 509,281 512,275 513,273 513,270 514,266 516,263 517,259 517,255 518,251 520,245 521,241 521,239 521,236 521,235 521,232 521,229 521,228 520,228 516,228 513,228 508,228 502,232 494,237 487,241 478,248 466,256 452,267 435,278 421,289 408,300 394,310 386,320 375,329 368,339 362,346 356,350 352,356 347,362 344,363 341,367 341,369 340,371 340,377 339,382 337,390 335,400 330,409 326,419 322,428 318,436 314,444 312,450 310,455 307,458 307,459 307,462 309,461 312,458 314,455 317,452 321,450 324,446 326,444 332,440 337,436 349,428 364,420 376,412 390,405 405,397 421,390 436,383 452,378 470,373 483,369 501,366 513,363 527,362 536,360 541,359 544,359 548,362 554,363 563,367 577,370 587,375 602,379 617,383 633,390 655,396 674,402 697,409 714,415 733,420 748,425 759,429 767,432 770,432 771,432 773,432 777,431 783,424 792,417 802,410 813,400 827,389 843,377 866,358 884,343 898,333 909,327 920,320 927,317 932,313 935,310 938,309 940,308" fill="none" stroke="#ffffff" stroke-width="20"></polyline> </clipPath> <path d="M600,329 600,325 600,321 595,317 591,310 590,306 586,304 585,301 582,298 577,296 574,294 571,293 567,290 563,290 556,287 556,287 551,286 544,285 539,285 539,285 532,285 524,285 516,283 506,283 498,283 490,283 482,285 474,287 467,289 459,291 455,293 451,293 448,296 447,296 445,297 445,298 445,300 445,301 445,302 445,304 445,305 445,306 445,309 445,312 445,316 445,320 445,325 447,329 448,332 449,335 449,337 452,340 454,344 456,346 459,348 460,352 464,355 467,356 468,359 472,360 474,362 475,363 478,363 481,363 487,366 490,367 493,367 497,367 498,367 502,367 505,367 508,367 512,367 516,367 520,367 525,367 531,367 539,367 545,367 555,367 560,367 564,367 567,367 568,367 570,367 570,366 571,364 571,363 571,362 573,362" fill="none" stroke="#000000" stroke-width="3" clip-path="url(#test)"></polyline>
You could redraw objects with display attribute set to "none" See here or here