Related
I have this html5 canvas file (adobe animate) and i want to use an svg animated loader for it (the svg loader code is at the end of the html file) but i am not really sure how to do it, especially that the body onload is already taken, can somebody show me how to do it?
<!DOCTYPE html>
<!--
NOTES:
1. All tokens are represented by '$' sign in the template.
2. You can write your code only wherever mentioned.
3. All occurrences of existing tokens will be replaced by their appropriate values.
4. Blank lines will be removed automatically.
5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>1</title>
<!-- write your code here -->
<style>
#animation_container {
position:absolute;
margin:auto;
left:0;right:0;
top:0;bottom:0;
}
</style>
<script src="createjs.min.js"></script>
<script src="1.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("84461339880503479AB31885C2CE7CD2");
var lib=comp.getLibrary();
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
var lib=comp.getLibrary();
loader.loadManifest(lib.properties.manifest);
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for(i=0; i<ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
}
exportRoot = new lib._1();
stage = new lib.Stage(canvas);
stage.enableMouseOver();
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.framerate = lib.properties.fps;
createjs.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
function playSound(id, loop) {
return createjs.Sound.play(id, {'interrupt':createjs.Sound.INTERRUPT_EARLY, 'loop': loop});}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1366px; height:768px">
<canvas id="canvas" width="1366" height="768" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1366px; height:768px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org"
id="camera-loader"
width="85.708488"
height="100">
<defs
id="defs12" />
<path
id="camera-body"
d="M 51.5625 0 C 50.667739 -0.00962983 49.756943 0.05800477 48.84375 0.1875 C 41.018415 1.2971691 35.117198 7.3376842 33.8125 14.71875 C 30.504071 7.9918491 23.138091 3.8277945 15.3125 4.9375 C 5.573576 6.3185261 -1.1937811 15.321773 0.1875 25.0625 C 1.030765 31.00916 4.7245026 35.850708 9.6875 38.40625 L 10.59375 44.84375 L 41.21875 40.5 C 42.618434 40.301472 43.966737 41.101389 44.15625 42.4375 C 44.34576 43.773612 43.274684 44.957723 41.875 45.15625 L 11.25 49.5 L 12.40625 57.6875 C 12.593105 59.005185 13.837018 59.937079 15.15625 59.75 L 64.25 52.78125 C 65.567815 52.594377 66.499355 51.348937 66.3125 50.03125 L 63.5625 30.78125 C 67.618077 26.946961 69.843395 21.259142 69 15.3125 C 67.748216 6.4849658 60.211858 0.09304631 51.5625 0 z M 51.28125 3.75 C 58.168631 3.6506107 64.22589 8.6859174 65.21875 15.6875 C 66.295328 23.279482 61.029156 30.329715 53.4375 31.40625 C 45.84552 32.482829 38.795329 27.18573 37.71875 19.59375 C 36.641441 11.998855 41.938942 4.9828747 49.53125 3.90625 C 50.124347 3.8221462 50.697574 3.7584222 51.28125 3.75 z M 17.5625 8.53125 C 24.449868 8.4318561 30.507144 13.46718 31.5 20.46875 C 32.576577 28.060719 27.310389 35.110969 19.71875 36.1875 C 12.126783 37.264077 5.0765804 31.966969 4 24.375 C 2.9226914 16.780121 8.2202041 9.7641225 15.8125 8.6875 C 16.405598 8.603395 16.978824 8.5396714 17.5625 8.53125 z M 79.71875 27.46875 L 66.9375 33.65625 L 68.53125 44.8125 L 82.53125 47.21875 L 79.71875 27.46875 z M 41.71875 41.0625 C 41.582761 41.058251 41.422178 41.073761 41.28125 41.09375 L 8.15625 45.78125 L 7.90625 44.09375 L 2.78125 43.9375 L 4 52.53125 L 8.875 50.9375 L 8.625 49.25 L 41.78125 44.5625 C 42.908673 44.40259 43.699053 43.493996 43.5625 42.53125 C 43.443014 41.688847 42.670671 41.092246 41.71875 41.0625 z M 51.53125 57.21875 L 28.625 60.4375 C 28.625117 63.279515 28.625057 61.501735 28.625 64.34375 L 30.90625 64.34375 L 32.40625 64.34375 L 17.21875 97.46875 C 16.804629 98.371268 17.19123 99.429629 18.09375 99.84375 C 18.996268 100.25787 20.054629 99.87127 20.46875 98.96875 L 36.34375 64.34375 L 38.28125 64.34375 L 38.28125 98.21875 C 38.28125 99.211743 39.069507 100 40.0625 100 C 41.055493 100 41.875 99.211743 41.875 98.21875 L 41.875 64.34375 L 43.6875 64.34375 L 59.71875 98.96875 C 60.136118 99.869771 61.192729 100.26112 62.09375 99.84375 C 62.994771 99.426382 63.386118 98.338521 62.96875 97.4375 L 47.65625 64.34375 L 49.09375 64.34375 L 51.53125 64.34375 L 51.53125 57.21875 z " />
<path
id="reel-1"
d="m 17.763265,10.60917 c -1.849868,0 -3.349902,1.500036 -3.349902,3.349902 0,1.849868 1.500034,3.34863 3.349902,3.34863 1.849865,0 3.348629,-1.498762 3.348629,-3.34863 0,-1.849866 -1.498764,-3.349902 -3.348629,-3.349902 z m -8.0539896,5.851215 c -1.849868,0 -3.3499023,1.500032 -3.3499023,3.349898 0,1.849866 1.5000343,3.349897 3.3499023,3.349897 1.8498656,0 3.3498996,-1.500031 3.3498996,-3.349897 0,-1.849866 -1.500034,-3.349898 -3.3498996,-3.349898 z m 16.1016246,0 c -1.849868,0 -3.3499,1.500032 -3.3499,3.349898 0,1.849866 1.500032,3.349897 3.3499,3.349897 1.849865,0 3.348629,-1.500031 3.348629,-3.349897 0,-1.849866 -1.498764,-3.349898 -3.348629,-3.349898 z m -13.023579,9.460259 c -1.849867,0 -3.3498994,1.500032 -3.3498994,3.349902 0,1.849865 1.5000324,3.348629 3.3498994,3.348629 1.849867,0 3.3499,-1.498764 3.3499,-3.348629 0,-1.84987 -1.500033,-3.349902 -3.3499,-3.349902 z m 9.950613,0 c -1.849866,0 -3.348629,1.500032 -3.348629,3.349902 0,1.849865 1.498763,3.348629 3.348629,3.348629 1.849865,0 3.349901,-1.498764 3.349901,-3.348629 0,-1.84987 -1.500036,-3.349902 -3.349901,-3.349902 z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="2s"
begin="0"
from="0 17.66 22.74"
to="360 17.66 22.74"
repeatCount="indefinite" />
</path>
<path
id="reel-2"
d="m 51.483904,5.8171007 c -1.849872,0 -3.349908,1.5000388 -3.349908,3.3499074 0,1.8498709 1.500036,3.3486359 3.349908,3.3486359 1.849868,0 3.348635,-1.498765 3.348635,-3.3486359 0,-1.8498686 -1.498767,-3.3499074 -3.348635,-3.3499074 z M 43.4299,11.668326 c -1.849872,0 -3.349908,1.500034 -3.349908,3.349904 0,1.849869 1.500036,3.349903 3.349908,3.349903 1.849869,0 3.349906,-1.500034 3.349906,-3.349903 0,-1.84987 -1.500037,-3.349904 -3.349906,-3.349904 z m 16.101654,0 c -1.849871,0 -3.349907,1.500034 -3.349907,3.349904 0,1.849869 1.500036,3.349903 3.349907,3.349903 1.849867,0 3.348635,-1.500034 3.348635,-3.349903 0,-1.84987 -1.498768,-3.349904 -3.348635,-3.349904 z m -13.023602,9.460276 c -1.849871,0 -3.349907,1.500034 -3.349907,3.349908 0,1.849869 1.500036,3.348635 3.349907,3.348635 1.849869,0 3.349905,-1.498766 3.349905,-3.348635 0,-1.849874 -1.500036,-3.349908 -3.349905,-3.349908 z m 9.950632,0 c -1.849872,0 -3.348637,1.500034 -3.348637,3.349908 0,1.849869 1.498765,3.348635 3.348637,3.348635 1.849867,0 3.349905,-1.498766 3.349905,-3.348635 0,-1.849874 -1.500038,-3.349908 -3.349905,-3.349908 z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="3.6s"
begin="0"
from="0 51.4 17.7"
to="360 51.4 17.7"
repeatCount="indefinite" />
</path>
</svg>
<span>Loading…</span>
If you want to do a preloader simple way would be:-
A div with Preloader code:-
(Class is important as it will be used in JS)
<div class="loader">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org"
id="camera-loader"
width="85.708488"
height="100">
<defs
id="defs12" />
<path
id="camera-body"
d="M 51.5625 0 C 50.667739 -0.00962983 49.756943 0.05800477 48.84375 0.1875 C 41.018415 1.2971691 35.117198 7.3376842 33.8125 14.71875 C 30.504071 7.9918491 23.138091 3.8277945 15.3125 4.9375 C 5.573576 6.3185261 -1.1937811 15.321773 0.1875 25.0625 C 1.030765 31.00916 4.7245026 35.850708 9.6875 38.40625 L 10.59375 44.84375 L 41.21875 40.5 C 42.618434 40.301472 43.966737 41.101389 44.15625 42.4375 C 44.34576 43.773612 43.274684 44.957723 41.875 45.15625 L 11.25 49.5 L 12.40625 57.6875 C 12.593105 59.005185 13.837018 59.937079 15.15625 59.75 L 64.25 52.78125 C 65.567815 52.594377 66.499355 51.348937 66.3125 50.03125 L 63.5625 30.78125 C 67.618077 26.946961 69.843395 21.259142 69 15.3125 C 67.748216 6.4849658 60.211858 0.09304631 51.5625 0 z M 51.28125 3.75 C 58.168631 3.6506107 64.22589 8.6859174 65.21875 15.6875 C 66.295328 23.279482 61.029156 30.329715 53.4375 31.40625 C 45.84552 32.482829 38.795329 27.18573 37.71875 19.59375 C 36.641441 11.998855 41.938942 4.9828747 49.53125 3.90625 C 50.124347 3.8221462 50.697574 3.7584222 51.28125 3.75 z M 17.5625 8.53125 C 24.449868 8.4318561 30.507144 13.46718 31.5 20.46875 C 32.576577 28.060719 27.310389 35.110969 19.71875 36.1875 C 12.126783 37.264077 5.0765804 31.966969 4 24.375 C 2.9226914 16.780121 8.2202041 9.7641225 15.8125 8.6875 C 16.405598 8.603395 16.978824 8.5396714 17.5625 8.53125 z M 79.71875 27.46875 L 66.9375 33.65625 L 68.53125 44.8125 L 82.53125 47.21875 L 79.71875 27.46875 z M 41.71875 41.0625 C 41.582761 41.058251 41.422178 41.073761 41.28125 41.09375 L 8.15625 45.78125 L 7.90625 44.09375 L 2.78125 43.9375 L 4 52.53125 L 8.875 50.9375 L 8.625 49.25 L 41.78125 44.5625 C 42.908673 44.40259 43.699053 43.493996 43.5625 42.53125 C 43.443014 41.688847 42.670671 41.092246 41.71875 41.0625 z M 51.53125 57.21875 L 28.625 60.4375 C 28.625117 63.279515 28.625057 61.501735 28.625 64.34375 L 30.90625 64.34375 L 32.40625 64.34375 L 17.21875 97.46875 C 16.804629 98.371268 17.19123 99.429629 18.09375 99.84375 C 18.996268 100.25787 20.054629 99.87127 20.46875 98.96875 L 36.34375 64.34375 L 38.28125 64.34375 L 38.28125 98.21875 C 38.28125 99.211743 39.069507 100 40.0625 100 C 41.055493 100 41.875 99.211743 41.875 98.21875 L 41.875 64.34375 L 43.6875 64.34375 L 59.71875 98.96875 C 60.136118 99.869771 61.192729 100.26112 62.09375 99.84375 C 62.994771 99.426382 63.386118 98.338521 62.96875 97.4375 L 47.65625 64.34375 L 49.09375 64.34375 L 51.53125 64.34375 L 51.53125 57.21875 z " />
<path
id="reel-1"
d="m 17.763265,10.60917 c -1.849868,0 -3.349902,1.500036 -3.349902,3.349902 0,1.849868 1.500034,3.34863 3.349902,3.34863 1.849865,0 3.348629,-1.498762 3.348629,-3.34863 0,-1.849866 -1.498764,-3.349902 -3.348629,-3.349902 z m -8.0539896,5.851215 c -1.849868,0 -3.3499023,1.500032 -3.3499023,3.349898 0,1.849866 1.5000343,3.349897 3.3499023,3.349897 1.8498656,0 3.3498996,-1.500031 3.3498996,-3.349897 0,-1.849866 -1.500034,-3.349898 -3.3498996,-3.349898 z m 16.1016246,0 c -1.849868,0 -3.3499,1.500032 -3.3499,3.349898 0,1.849866 1.500032,3.349897 3.3499,3.349897 1.849865,0 3.348629,-1.500031 3.348629,-3.349897 0,-1.849866 -1.498764,-3.349898 -3.348629,-3.349898 z m -13.023579,9.460259 c -1.849867,0 -3.3498994,1.500032 -3.3498994,3.349902 0,1.849865 1.5000324,3.348629 3.3498994,3.348629 1.849867,0 3.3499,-1.498764 3.3499,-3.348629 0,-1.84987 -1.500033,-3.349902 -3.3499,-3.349902 z m 9.950613,0 c -1.849866,0 -3.348629,1.500032 -3.348629,3.349902 0,1.849865 1.498763,3.348629 3.348629,3.348629 1.849865,0 3.349901,-1.498764 3.349901,-3.348629 0,-1.84987 -1.500036,-3.349902 -3.349901,-3.349902 z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="2s"
begin="0"
from="0 17.66 22.74"
to="360 17.66 22.74"
repeatCount="indefinite" />
</path>
<path
id="reel-2"
d="m 51.483904,5.8171007 c -1.849872,0 -3.349908,1.5000388 -3.349908,3.3499074 0,1.8498709 1.500036,3.3486359 3.349908,3.3486359 1.849868,0 3.348635,-1.498765 3.348635,-3.3486359 0,-1.8498686 -1.498767,-3.3499074 -3.348635,-3.3499074 z M 43.4299,11.668326 c -1.849872,0 -3.349908,1.500034 -3.349908,3.349904 0,1.849869 1.500036,3.349903 3.349908,3.349903 1.849869,0 3.349906,-1.500034 3.349906,-3.349903 0,-1.84987 -1.500037,-3.349904 -3.349906,-3.349904 z m 16.101654,0 c -1.849871,0 -3.349907,1.500034 -3.349907,3.349904 0,1.849869 1.500036,3.349903 3.349907,3.349903 1.849867,0 3.348635,-1.500034 3.348635,-3.349903 0,-1.84987 -1.498768,-3.349904 -3.348635,-3.349904 z m -13.023602,9.460276 c -1.849871,0 -3.349907,1.500034 -3.349907,3.349908 0,1.849869 1.500036,3.348635 3.349907,3.348635 1.849869,0 3.349905,-1.498766 3.349905,-3.348635 0,-1.849874 -1.500036,-3.349908 -3.349905,-3.349908 z m 9.950632,0 c -1.849872,0 -3.348637,1.500034 -3.348637,3.349908 0,1.849869 1.498765,3.348635 3.348637,3.348635 1.849867,0 3.349905,-1.498766 3.349905,-3.348635 0,-1.849874 -1.500038,-3.349908 -3.349905,-3.349908 z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="3.6s"
begin="0"
from="0 51.4 17.7"
to="360 51.4 17.7"
repeatCount="indefinite" />
</path>
</svg>
<span>Loading…</span>
</div>
JS with jQuery Imported:-
$(window).load(function() {
$(".loader").delay(2000).fadeOut("slow");
})
JS without jQuery:-
var preloader = document.getElementById("loader");
function fadeOutnojquery(el) {
el.style.opacity = 1;
var interpreloader = setInterval(function () {
el.style.opacity = el.style.opacity - 0.05;
if (el.style.opacity <= 0.05) {
clearInterval(interpreloader);
preloader.style.display = "none";
}
}, 15);
}
window.onload = function () {
setTimeout(function () {
fadeOutnojquery(preloader);
}, 2000); // Preloader ms working time
};
Codepen:- Codepen
Data is preloaded here because there is only 1 line of data to load.
this worked, i just replaced the gif preloaded with an svg, thanks for "fatalcoder524" for helping
<!DOCTYPE html>
<!--
NOTES:
1. All tokens are represented by '$' sign in the template.
2. You can write your code only wherever mentioned.
3. All occurrences of existing tokens will be replaced by their appropriate values.
4. Blank lines will be removed automatically.
5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>1</title>
<!-- write your code here -->
<style>
#animation_container, #_preload_div_ {
position:absolute;
margin:auto;
left:0;right:0;
top:0;bottom:0;
}
#camera-loader {
position:absolute;
margin:auto;
left:0;right:0;
top:0;bottom:0;
}
</style>
<script src="createjs.min.js"></script>
<script src="1.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("84461339880503479AB31885C2CE7CD2");
var lib=comp.getLibrary();
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
var lib=comp.getLibrary();
loader.loadManifest(lib.properties.manifest);
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for(i=0; i<ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
}
var preloaderDiv = document.getElementById("_preload_div_");
preloaderDiv.style.display = 'none';
canvas.style.display = 'block';
exportRoot = new lib._1();
stage = new lib.Stage(canvas);
stage.enableMouseOver();
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.framerate = lib.properties.fps;
createjs.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true,'both',true,1,[canvas,preloaderDiv,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
function playSound(id, loop) {
return createjs.Sound.play(id, {'interrupt':createjs.Sound.INTERRUPT_EARLY, 'loop': loop});}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1366px; height:768px">
<canvas id="canvas" width="1366" height="768" style="position: absolute; display: none; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1366px; height:768px; position: absolute; left: 0px; top: 0px; display: none;">
</div>
</div>
<div id='_preload_div_' ><svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org"
id="camera-loader"
width="85.708488"
height="100">
<defs
id="defs12" />
<path
id="camera-body"
d="M 51.5625 0 C 50.667739 -0.00962983 49.756943 0.05800477 48.84375 0.1875 C 41.018415 1.2971691 35.117198 7.3376842 33.8125 14.71875 C 30.504071 7.9918491 23.138091 3.8277945 15.3125 4.9375 C 5.573576 6.3185261 -1.1937811 15.321773 0.1875 25.0625 C 1.030765 31.00916 4.7245026 35.850708 9.6875 38.40625 L 10.59375 44.84375 L 41.21875 40.5 C 42.618434 40.301472 43.966737 41.101389 44.15625 42.4375 C 44.34576 43.773612 43.274684 44.957723 41.875 45.15625 L 11.25 49.5 L 12.40625 57.6875 C 12.593105 59.005185 13.837018 59.937079 15.15625 59.75 L 64.25 52.78125 C 65.567815 52.594377 66.499355 51.348937 66.3125 50.03125 L 63.5625 30.78125 C 67.618077 26.946961 69.843395 21.259142 69 15.3125 C 67.748216 6.4849658 60.211858 0.09304631 51.5625 0 z M 51.28125 3.75 C 58.168631 3.6506107 64.22589 8.6859174 65.21875 15.6875 C 66.295328 23.279482 61.029156 30.329715 53.4375 31.40625 C 45.84552 32.482829 38.795329 27.18573 37.71875 19.59375 C 36.641441 11.998855 41.938942 4.9828747 49.53125 3.90625 C 50.124347 3.8221462 50.697574 3.7584222 51.28125 3.75 z M 17.5625 8.53125 C 24.449868 8.4318561 30.507144 13.46718 31.5 20.46875 C 32.576577 28.060719 27.310389 35.110969 19.71875 36.1875 C 12.126783 37.264077 5.0765804 31.966969 4 24.375 C 2.9226914 16.780121 8.2202041 9.7641225 15.8125 8.6875 C 16.405598 8.603395 16.978824 8.5396714 17.5625 8.53125 z M 79.71875 27.46875 L 66.9375 33.65625 L 68.53125 44.8125 L 82.53125 47.21875 L 79.71875 27.46875 z M 41.71875 41.0625 C 41.582761 41.058251 41.422178 41.073761 41.28125 41.09375 L 8.15625 45.78125 L 7.90625 44.09375 L 2.78125 43.9375 L 4 52.53125 L 8.875 50.9375 L 8.625 49.25 L 41.78125 44.5625 C 42.908673 44.40259 43.699053 43.493996 43.5625 42.53125 C 43.443014 41.688847 42.670671 41.092246 41.71875 41.0625 z M 51.53125 57.21875 L 28.625 60.4375 C 28.625117 63.279515 28.625057 61.501735 28.625 64.34375 L 30.90625 64.34375 L 32.40625 64.34375 L 17.21875 97.46875 C 16.804629 98.371268 17.19123 99.429629 18.09375 99.84375 C 18.996268 100.25787 20.054629 99.87127 20.46875 98.96875 L 36.34375 64.34375 L 38.28125 64.34375 L 38.28125 98.21875 C 38.28125 99.211743 39.069507 100 40.0625 100 C 41.055493 100 41.875 99.211743 41.875 98.21875 L 41.875 64.34375 L 43.6875 64.34375 L 59.71875 98.96875 C 60.136118 99.869771 61.192729 100.26112 62.09375 99.84375 C 62.994771 99.426382 63.386118 98.338521 62.96875 97.4375 L 47.65625 64.34375 L 49.09375 64.34375 L 51.53125 64.34375 L 51.53125 57.21875 z " />
<path
id="reel-1"
d="m 17.763265,10.60917 c -1.849868,0 -3.349902,1.500036 -3.349902,3.349902 0,1.849868 1.500034,3.34863 3.349902,3.34863 1.849865,0 3.348629,-1.498762 3.348629,-3.34863 0,-1.849866 -1.498764,-3.349902 -3.348629,-3.349902 z m -8.0539896,5.851215 c -1.849868,0 -3.3499023,1.500032 -3.3499023,3.349898 0,1.849866 1.5000343,3.349897 3.3499023,3.349897 1.8498656,0 3.3498996,-1.500031 3.3498996,-3.349897 0,-1.849866 -1.500034,-3.349898 -3.3498996,-3.349898 z m 16.1016246,0 c -1.849868,0 -3.3499,1.500032 -3.3499,3.349898 0,1.849866 1.500032,3.349897 3.3499,3.349897 1.849865,0 3.348629,-1.500031 3.348629,-3.349897 0,-1.849866 -1.498764,-3.349898 -3.348629,-3.349898 z m -13.023579,9.460259 c -1.849867,0 -3.3498994,1.500032 -3.3498994,3.349902 0,1.849865 1.5000324,3.348629 3.3498994,3.348629 1.849867,0 3.3499,-1.498764 3.3499,-3.348629 0,-1.84987 -1.500033,-3.349902 -3.3499,-3.349902 z m 9.950613,0 c -1.849866,0 -3.348629,1.500032 -3.348629,3.349902 0,1.849865 1.498763,3.348629 3.348629,3.348629 1.849865,0 3.349901,-1.498764 3.349901,-3.348629 0,-1.84987 -1.500036,-3.349902 -3.349901,-3.349902 z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="2s"
begin="0"
from="0 17.66 22.74"
to="360 17.66 22.74"
repeatCount="indefinite" />
</path>
<path
id="reel-2"
d="m 51.483904,5.8171007 c -1.849872,0 -3.349908,1.5000388 -3.349908,3.3499074 0,1.8498709 1.500036,3.3486359 3.349908,3.3486359 1.849868,0 3.348635,-1.498765 3.348635,-3.3486359 0,-1.8498686 -1.498767,-3.3499074 -3.348635,-3.3499074 z M 43.4299,11.668326 c -1.849872,0 -3.349908,1.500034 -3.349908,3.349904 0,1.849869 1.500036,3.349903 3.349908,3.349903 1.849869,0 3.349906,-1.500034 3.349906,-3.349903 0,-1.84987 -1.500037,-3.349904 -3.349906,-3.349904 z m 16.101654,0 c -1.849871,0 -3.349907,1.500034 -3.349907,3.349904 0,1.849869 1.500036,3.349903 3.349907,3.349903 1.849867,0 3.348635,-1.500034 3.348635,-3.349903 0,-1.84987 -1.498768,-3.349904 -3.348635,-3.349904 z m -13.023602,9.460276 c -1.849871,0 -3.349907,1.500034 -3.349907,3.349908 0,1.849869 1.500036,3.348635 3.349907,3.348635 1.849869,0 3.349905,-1.498766 3.349905,-3.348635 0,-1.849874 -1.500036,-3.349908 -3.349905,-3.349908 z m 9.950632,0 c -1.849872,0 -3.348637,1.500034 -3.348637,3.349908 0,1.849869 1.498765,3.348635 3.348637,3.348635 1.849867,0 3.349905,-1.498766 3.349905,-3.348635 0,-1.849874 -1.500038,-3.349908 -3.349905,-3.349908 z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="3.6s"
begin="0"
from="0 51.4 17.7"
to="360 51.4 17.7"
repeatCount="indefinite" />
</path>
</svg>
</div>
</body>
</html>
I'm having troubles rendering an inline SVG on the browser (Google Chrome) when adding a "xmlns" namespace to the svg elements.
The following code doesn't render (0x0px);
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="100px" viewBox="1015, 895, 32, 18">
<svg:g transform="matrix(1 0 0 -1 0 2384)">
<svg:g transform="">
<svg:path d="M 1033.56 1472.84 L 1033.8 1472.84 L 1034.04 1472.84 L 1034.28 1472.84 L 1034.64 1472.84 L 1034.88 1472.96 L 1035.12 1472.96 L 1035.36 1473.08 L 1035.72 1473.08 L 1035.96 1473.2 L 1036.2 1473.32 L 1036.44 1473.44 L 1036.68 1473.56 L 1036.92 1473.68 L 1037.16 1473.8 L 1037.4 1474.04 L 1037.64 1474.16 L 1037.88 1474.28 L 1038 1474.52 L 1038.24 1474.64 L 1038.48 1474.88 L 1038.6 1475.12 L 1038.84 1475.24 L 1038.96 1475.48 L 1039.2 1475.72 L 1039.32 1475.96 L 1039.44 1476.2 L 1039.56 1476.44 L 1039.68 1476.68 L 1039.8 1476.92 L 1039.92 1477.16 L 1040.04 1477.4 L 1040.16 1477.64 L 1040.16 1478 L 1040.28 1478.24 L 1040.28 1478.48 L 1040.4 1478.72 L 1040.4 1479.08 L 1040.4 1479.32 L 1040.4 1479.56 L 1040.4 1479.8 L 1040.4 1480.16 L 1040.4 1480.4 L 1040.4 1480.64 L 1040.28 1481 L 1040.28 1481.24 L 1040.16 1481.48 L 1040.16 1481.72 L 1040.04 1481.96 L 1039.92 1482.32 L 1039.8 1482.56 L 1039.68 1482.8 L 1039.56 1483.04 L 1039.44 1483.28 L 1039.32 1483.52 L 1039.2 1483.76 L 1038.96 1483.88 L 1038.84 1484.12 L 1038.6 1484.36 L 1038.48 1484.6 L 1038.24 1484.72 L 1038 1484.96 L 1037.88 1485.08 L 1037.64 1485.32 L 1037.4 1485.44 L 1037.16 1485.56 L 1036.92 1485.68 L 1036.68 1485.8 L 1036.44 1485.92 L 1036.2 1486.04 L 1035.96 1486.16 L 1035.6 1486.28 L 1035.36 1486.4 L 1035.12 1486.4 L 1034.88 1486.52 L 1034.64 1486.52 L 1034.28 1486.52 L 1034.04 1486.64 L 1033.8 1486.64 L 1033.44 1486.64 L 1033.2 1486.64 L 1032.96 1486.64 L 1032.72 1486.52 L 1032.36 1486.52 L 1032.12 1486.52 L 1031.88 1486.4 L 1031.64 1486.4 L 1031.28 1486.28 L 1031.04 1486.16 L 1030.8 1486.04 L 1030.56 1485.92 L 1030.32 1485.8 L 1030.08 1485.68 L 1029.84 1485.56 L 1029.6 1485.44 L 1029.36 1485.2 L 1029.12 1485.08 L 1029 1484.96 L 1028.76 1484.72 L 1028.52 1484.48 L 1028.4 1484.36 L 1028.16 1484.12 L 1028.04 1483.88 L 1027.8 1483.64 L 1027.68 1483.4 L 1027.56 1483.16 L 1027.44 1482.92 L 1027.32 1482.68 L 1027.2 1482.44 L 1027.08 1482.2 L 1026.96 1481.96 L 1026.84 1481.72 L 1026.84 1481.48 L 1026.72 1481.12 L 1026.72 1480.88 L 1026.72 1480.64 L 1026.6 1480.4 L 1026.6 1480.04 L 1026.6 1479.8 L 1026.6 1479.56 L 1026.6 1479.32 L 1026.6 1478.96 L 1026.72 1478.72 L 1026.72 1478.48 L 1026.72 1478.12 L 1026.84 1477.88 L 1026.96 1477.64 L 1026.96 1477.4 L 1027.08 1477.16 L 1027.2 1476.92 L 1027.32 1476.68 L 1027.44 1476.44 L 1027.56 1476.2 L 1027.68 1475.96 L 1027.92 1475.72 L 1028.04 1475.48 L 1028.28 1475.24 L 1028.4 1475 L 1028.64 1474.88 L 1028.76 1474.64 L 1029 1474.52 L 1029.24 1474.28 L 1029.48 1474.16 L 1029.6 1473.92 L 1029.84 1473.8 L 1030.08 1473.68 L 1030.32 1473.56 L 1030.56 1473.44 L 1030.92 1473.32 L 1031.16 1473.2 L 1031.4 1473.08 L 1031.64 1473.08 L 1031.88 1472.96 L 1032.12 1472.96 L 1032.48 1472.84 L 1032.72 1472.84 L 1032.96 1472.84 L 1033.32 1472.84 L 1033.56 1472.84" fill="none" stroke="#000000" stroke-opacity="1" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.32px" stroke-dasharray="" stroke-dashoffset="0px" style="stroke: red;"></svg:path>
</svg:g>
</svg:g>
</svg:svg>
</div>
</body>
</html>
https://jsfiddle.net/9vsodk18/
Whereas the "non-namespaced" equivalent does;
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" viewBox="1015, 895, 32, 18">
<g transform="matrix(1 0 0 -1 0 2384)">
<g transform="">
<path d="M 1033.56 1472.84 L 1033.8 1472.84 L 1034.04 1472.84 L 1034.28 1472.84 L 1034.64 1472.84 L 1034.88 1472.96 L 1035.12 1472.96 L 1035.36 1473.08 L 1035.72 1473.08 L 1035.96 1473.2 L 1036.2 1473.32 L 1036.44 1473.44 L 1036.68 1473.56 L 1036.92 1473.68 L 1037.16 1473.8 L 1037.4 1474.04 L 1037.64 1474.16 L 1037.88 1474.28 L 1038 1474.52 L 1038.24 1474.64 L 1038.48 1474.88 L 1038.6 1475.12 L 1038.84 1475.24 L 1038.96 1475.48 L 1039.2 1475.72 L 1039.32 1475.96 L 1039.44 1476.2 L 1039.56 1476.44 L 1039.68 1476.68 L 1039.8 1476.92 L 1039.92 1477.16 L 1040.04 1477.4 L 1040.16 1477.64 L 1040.16 1478 L 1040.28 1478.24 L 1040.28 1478.48 L 1040.4 1478.72 L 1040.4 1479.08 L 1040.4 1479.32 L 1040.4 1479.56 L 1040.4 1479.8 L 1040.4 1480.16 L 1040.4 1480.4 L 1040.4 1480.64 L 1040.28 1481 L 1040.28 1481.24 L 1040.16 1481.48 L 1040.16 1481.72 L 1040.04 1481.96 L 1039.92 1482.32 L 1039.8 1482.56 L 1039.68 1482.8 L 1039.56 1483.04 L 1039.44 1483.28 L 1039.32 1483.52 L 1039.2 1483.76 L 1038.96 1483.88 L 1038.84 1484.12 L 1038.6 1484.36 L 1038.48 1484.6 L 1038.24 1484.72 L 1038 1484.96 L 1037.88 1485.08 L 1037.64 1485.32 L 1037.4 1485.44 L 1037.16 1485.56 L 1036.92 1485.68 L 1036.68 1485.8 L 1036.44 1485.92 L 1036.2 1486.04 L 1035.96 1486.16 L 1035.6 1486.28 L 1035.36 1486.4 L 1035.12 1486.4 L 1034.88 1486.52 L 1034.64 1486.52 L 1034.28 1486.52 L 1034.04 1486.64 L 1033.8 1486.64 L 1033.44 1486.64 L 1033.2 1486.64 L 1032.96 1486.64 L 1032.72 1486.52 L 1032.36 1486.52 L 1032.12 1486.52 L 1031.88 1486.4 L 1031.64 1486.4 L 1031.28 1486.28 L 1031.04 1486.16 L 1030.8 1486.04 L 1030.56 1485.92 L 1030.32 1485.8 L 1030.08 1485.68 L 1029.84 1485.56 L 1029.6 1485.44 L 1029.36 1485.2 L 1029.12 1485.08 L 1029 1484.96 L 1028.76 1484.72 L 1028.52 1484.48 L 1028.4 1484.36 L 1028.16 1484.12 L 1028.04 1483.88 L 1027.8 1483.64 L 1027.68 1483.4 L 1027.56 1483.16 L 1027.44 1482.92 L 1027.32 1482.68 L 1027.2 1482.44 L 1027.08 1482.2 L 1026.96 1481.96 L 1026.84 1481.72 L 1026.84 1481.48 L 1026.72 1481.12 L 1026.72 1480.88 L 1026.72 1480.64 L 1026.6 1480.4 L 1026.6 1480.04 L 1026.6 1479.8 L 1026.6 1479.56 L 1026.6 1479.32 L 1026.6 1478.96 L 1026.72 1478.72 L 1026.72 1478.48 L 1026.72 1478.12 L 1026.84 1477.88 L 1026.96 1477.64 L 1026.96 1477.4 L 1027.08 1477.16 L 1027.2 1476.92 L 1027.32 1476.68 L 1027.44 1476.44 L 1027.56 1476.2 L 1027.68 1475.96 L 1027.92 1475.72 L 1028.04 1475.48 L 1028.28 1475.24 L 1028.4 1475 L 1028.64 1474.88 L 1028.76 1474.64 L 1029 1474.52 L 1029.24 1474.28 L 1029.48 1474.16 L 1029.6 1473.92 L 1029.84 1473.8 L 1030.08 1473.68 L 1030.32 1473.56 L 1030.56 1473.44 L 1030.92 1473.32 L 1031.16 1473.2 L 1031.4 1473.08 L 1031.64 1473.08 L 1031.88 1472.96 L 1032.12 1472.96 L 1032.48 1472.84 L 1032.72 1472.84 L 1032.96 1472.84 L 1033.32 1472.84 L 1033.56 1472.84" fill="none" stroke="#000000" stroke-opacity="1" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.32px" stroke-dasharray="" stroke-dashoffset="0px" style="stroke: red;"></path>
</g>
</g>
</svg>
</div>
</body>
</html>
https://jsfiddle.net/xLbtjrqc/
I have read the Namespaces Crash Course several times, any ideas would be appreciated!
If you want to use xhtml you must serve the page with an approprate mime type i.e. application/xhtml+xml, application/xml or text/xml
A non XML mime type such as text/html won't allow you to use namespaces in markup at all.
jsfiddle uses text/html as its mime type so you can't use namespaces and xhtml there only html.
There are many other differences too e.g. your document must be valid XML if you use an XML mime type. Forgetting a close tag isn't fatal in HTML, it is in XML.
I have this linkedin logo as svg that I'm trying to fit into a div element. However, the svg won't scale correctly. The logo is square, so I have set the viewBox to be 100x100 and also given the width and the height as 100. The result is that the logo is cropped: only one corner is shown. Any idea what I'm doing wrong here?
#container {
height: 100px;
width: 400px;
background-color: rebeccapurple;
}
<div id="container">
<svg width="100" height="100" viewBox="0 0 100 100">
<path d="m 1227.06,212.93 h -213.44 v 334.187 c 0,79.731 -1.46,182.235 -110.983,182.235 -111.145,0 -128.164,-86.825 -128.164,-176.461 V 212.93 H 561.047 V 900.137 H 765.93 v -93.891 h 2.84 c 28.496,54.027 98.171,110.996 202.082,110.996 216.278,0 256.208,-142.336 256.208,-327.359 z M 320.344,994.082 c -68.457,0 -123.867,55.508 -123.867,123.868 0,68.3 55.41,123.8 123.867,123.8 68.277,0 123.765,-55.5 123.765,-123.8 0,-68.36 -55.488,-123.868 -123.765,-123.868 z M 427.09,212.93 H 213.496 V 900.137 H 427.09 Z M 1333.43,1440 H 106.289 C 47.6484,1440 0,1393.52 0,1336.21 V 103.91 C 0,46.5508 47.6484,0 106.289,0 H 1333.43 c 58.74,0 106.59,46.5508 106.59,103.91 v 1232.3 c 0,57.31 -47.85,103.79 -106.59,103.79" />
</svg>
</div>
Since, your coordinates vary in between -1500 to +1500, you should make that or similar coordinates as your viewport (the reason being all your points are included in the viewport area) and then resize it using width and height as 100px.
Here's a demonstration:
#container {
height: 100px;
width: 400px;
background-color: rebeccapurple;
}
<div id="container">
<svg width="100" height="100" viewBox="0 0 1500 1500">
<path d="m 1227.06,212.93 h -213.44 v 334.187 c 0,79.731 -1.46,182.235 -110.983,182.235 -111.145,0 -128.164,-86.825 -128.164,-176.461 V 212.93 H 561.047 V 900.137 H 765.93 v -93.891 h 2.84 c 28.496,54.027 98.171,110.996 202.082,110.996 216.278,0 256.208,-142.336 256.208,-327.359 z M 320.344,994.082 c -68.457,0 -123.867,55.508 -123.867,123.868 0,68.3 55.41,123.8 123.867,123.8 68.277,0 123.765,-55.5 123.765,-123.8 0,-68.36 -55.488,-123.868 -123.765,-123.868 z M 427.09,212.93 H 213.496 V 900.137 H 427.09 Z M 1333.43,1440 H 106.289 C 47.6484,1440 0,1393.52 0,1336.21 V 103.91 C 0,46.5508 47.6484,0 106.289,0 H 1333.43 c 58.74,0 106.59,46.5508 106.59,103.91 v 1232.3 c 0,57.31 -47.85,103.79 -106.59,103.79" />
</svg>
</div>
Firstly, sorry for what I think is a bit of a silly question - I just can't figure it out!
I basically have an SVG image which is of some text reading 'Music made in Sheff'.
I'd like the text to appear, or animate, as if it was drawing (not a typewriter effect) itself.
At the moment my drawing animation just happens over the SVG, instead of actually appearing from nothing.
You can see what I mean if you visit this codepen... http://codepen.io/skoster7/pen/QpwbWV?editors=1100
Here's the HTML and SVG
<svg id="svg" version="1.1" width="1000" height="749" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;" fill="transparent"> <path class="logo" d="M263.500 249.899 C 266.635 249.967,271.765 249.967,274.900 249.899 C 278.035 249.832,275.470 249.776,269.200 249.776 C 262.930 249.776,260.365 249.832,263.500 249.899 " stroke="none" fill="#000000" fill-rule="evenodd"></path><path id="path1" class="logo" d="M217.228 12.784 C 210.610 15.244,207.800 19.790,207.800 28.037 L 207.800 33.074 209.377 36.181 C 211.402 40.170,213.998 42.488,220.504 46.115 C 230.667 51.781,234.243 58.257,231.816 66.604 C 228.883 76.693,217.143 79.242,210.406 71.253 C 208.497 68.990,208.464 68.973,207.429 69.729 C 206.449 70.446,207.305 72.138,209.690 74.195 C 218.289 81.615,230.527 78.483,233.975 67.982 C 237.151 58.306,232.589 49.369,221.643 43.822 C 211.540 38.702,208.014 31.881,210.774 22.796 C 213.699 13.165,225.758 11.169,231.702 19.331 C 232.217 20.038,232.265 20.038,233.158 19.315 L 234.080 18.568 232.729 16.784 C 229.629 12.692,222.455 10.841,217.228 12.784 M264.113 12.362 C 253.999 14.966,248.069 27.000,248.030 45.000 C 247.979 68.487,258.644 82.110,273.273 77.242 C 277.071 75.978,283.149 69.936,282.188 68.380 C 281.384 67.080,280.417 67.198,279.646 68.692 C 276.361 75.061,267.896 77.802,261.771 74.481 C 246.240 66.060,246.404 23.628,262.000 15.534 C 264.543 14.214,270.987 14.173,273.403 15.462 C 275.059 16.346,279.200 20.427,279.200 21.176 C 279.200 21.803,280.227 21.690,280.800 21.000 C 283.875 17.294,270.948 10.603,264.113 12.362 M116.400 45.200 L 116.400 76.800 117.600 76.800 L 118.800 76.800 118.832 47.300 C 118.859 21.959,118.939 18.026,119.404 19.400 C 119.702 20.280,120.873 23.970,122.006 27.600 C 123.140 31.230,124.670 36.090,125.406 38.400 C 126.142 40.710,127.851 46.200,129.204 50.600 C 130.556 55.000,132.176 60.220,132.804 62.200 C 133.431 64.180,134.722 68.274,135.672 71.298 L 137.400 76.795 138.815 76.798 L 140.230 76.800 141.896 71.300 C 143.594 65.696,145.075 60.948,148.790 49.200 C 151.518 40.574,154.088 32.337,156.216 25.400 C 157.161 22.320,158.118 19.350,158.342 18.800 C 158.624 18.107,158.757 26.860,158.775 47.300 L 158.800 76.800 160.000 76.800 L 161.200 76.800 161.200 45.200 L 161.200 13.600 159.269 13.600 L 157.338 13.600 155.919 18.300 C 155.139 20.885,153.867 25.070,153.094 27.600 C 152.320 30.130,150.754 35.260,149.614 39.000 C 148.475 42.740,147.384 46.160,147.190 46.600 C 146.997 47.040,146.191 49.650,145.400 52.400 C 144.609 55.150,143.799 57.760,143.600 58.200 C 143.401 58.640,142.595 61.250,141.807 64.000 C 141.020 66.750,140.202 69.313,139.988 69.695 C 139.775 70.077,139.600 70.560,139.600 70.769 C 139.600 70.977,139.402 71.655,139.159 72.274 C 138.668 73.530,139.163 74.847,134.621 60.200 C 133.597 56.900,131.945 51.590,130.949 48.400 C 129.953 45.210,128.347 40.034,127.379 36.897 C 126.410 33.761,124.792 28.541,123.783 25.297 C 122.773 22.054,121.555 18.095,121.077 16.500 L 120.206 13.600 118.303 13.600 L 116.400 13.600 116.400 45.200 M169.201 34.300 C 169.203 61.381,169.671 66.151,172.842 71.431 C 178.728 81.231,194.380 80.327,199.192 69.910 C 201.630 64.632,201.705 63.732,201.891 37.500 L 202.061 13.600 200.855 13.600 L 199.650 13.600 199.491 37.900 C 199.318 64.207,199.358 63.711,196.992 68.638 C 192.676 77.628,180.266 78.797,175.253 70.686 C 171.999 65.420,171.600 61.560,171.600 35.310 L 171.600 13.600 170.400 13.600 L 169.200 13.600 169.201 34.300 M186.779 96.500 C 186.767 96.555,186.035 99.390,185.153 102.800 C 184.271 106.210,182.764 112.060,181.804 115.800 C 180.844 119.540,178.322 129.260,176.200 137.400 C 169.838 161.795,170.344 159.200,171.950 159.200 C 173.100 159.200,173.101 159.196,174.724 152.900 C 175.616 149.435,176.651 145.475,177.023 144.100 L 177.698 141.600 188.589 141.600 L 199.480 141.600 201.582 149.900 C 202.739 154.465,203.750 158.425,203.830 158.700 C 203.983 159.229,206.400 159.415,206.400 158.897 C 206.400 158.731,206.204 157.966,205.964 157.197 C 205.724 156.429,204.747 152.650,203.794 148.800 C 200.921 137.197,198.185 126.218,196.218 118.400 C 195.194 114.330,193.640 108.030,192.765 104.400 C 191.890 100.770,191.077 97.485,190.960 97.100 C 190.781 96.514,186.895 95.956,186.779 96.500 M207.600 127.800 L 207.600 159.200 215.213 159.200 C 228.862 159.200,232.869 156.585,238.203 144.200 C 241.700 136.080,240.960 116.916,236.813 108.228 C 232.416 99.014,227.623 96.400,215.127 96.400 L 207.600 96.400 207.600 127.800 M246.400 127.800 L 246.400 159.200 258.200 159.200 C 269.733 159.200,270.000 159.182,270.000 158.400 C 270.000 157.620,269.733 157.600,259.200 157.600 L 248.400 157.600 248.400 142.800 L 248.400 128.000 258.200 128.000 L 268.000 128.000 268.000 126.800 L 268.000 125.600 258.200 125.600 L 248.400 125.600 248.400 112.000 L 248.400 98.400 258.800 98.400 L 269.200 98.400 269.200 97.400 L 269.200 96.400 257.800 96.400 L 246.400 96.400 246.400 127.800 M223.000 98.942 C 241.656 103.914,244.164 146.398,226.334 155.433 C 223.641 156.798,219.264 157.568,214.100 157.586 L 210.000 157.600 210.000 128.000 L 210.000 98.400 215.500 98.405 C 218.798 98.408,221.801 98.623,223.000 98.942 M191.162 107.800 C 192.294 112.420,193.494 117.280,193.827 118.600 C 194.160 119.920,195.136 123.915,195.995 127.479 C 196.854 131.042,197.836 134.899,198.178 136.051 C 199.326 139.918,200.184 139.600,188.600 139.600 C 182.990 139.600,178.400 139.450,178.400 139.266 C 178.400 139.082,179.587 134.267,181.037 128.566 C 182.487 122.865,184.462 115.050,185.425 111.200 C 188.392 99.336,188.547 98.786,188.828 99.097 C 188.979 99.264,190.029 103.180,191.162 107.800 M179.600 186.200 L 179.600 198.400 182.000 198.400 L 184.400 198.400 184.400 186.200 L 184.400 174.000 182.000 174.000 L 179.600 174.000 179.600 186.200 M144.400 249.800 L 144.400 287.600 145.600 287.600 L 146.800 287.600 146.800 268.800 L 146.800 250.000 164.200 250.000 L 181.600 250.000 181.600 268.800 L 181.600 287.600 183.000 287.600 L 184.400 287.600 184.400 249.800 L 184.400 212.000 183.000 212.000 L 181.600 212.000 181.600 229.800 L 181.600 247.600 164.200 247.600 L 146.800 247.600 146.800 229.800 L 146.800 212.000 145.600 212.000 L 144.400 212.000 144.400 249.800 M193.200 249.800 L 193.200 287.600 207.400 287.600 L 221.600 287.600 221.600 286.400 L 221.600 285.200 208.800 285.200 L 196.000 285.200 196.000 267.606 L 196.000 250.012 207.500 249.906 L 219.000 249.800 219.125 248.500 L 219.251 247.200 207.625 247.200 L 196.000 247.200 196.000 231.000 L 196.000 214.800 208.400 214.800 L 220.800 214.800 220.800 213.400 L 220.800 212.000 207.000 212.000 L 193.200 212.000 193.200 249.800 M225.200 249.800 L 225.200 287.600 226.600 287.600 L 228.000 287.600 228.000 268.806 L 228.000 250.012 239.300 249.906 L 250.600 249.800 250.725 248.500 L 250.851 247.200 239.425 247.200 L 228.000 247.200 228.000 231.000 L 228.000 214.800 240.200 214.800 L 252.400 214.800 252.400 213.400 L 252.400 212.000 238.800 212.000 L 225.200 212.000 225.200 249.800 " stroke="none" fill="#ffffff" fill-rule="evenodd"></path><path id="path2" d="M200.937 177.000 C 200.939 178.760,201.009 179.430,201.093 178.489 C 201.178 177.549,201.177 176.109,201.091 175.289 C 201.005 174.470,200.936 175.240,200.937 177.000 M200.937 183.400 C 200.939 185.160,201.009 185.830,201.093 184.889 C 201.178 183.949,201.177 182.509,201.091 181.689 C 201.005 180.870,200.936 181.640,200.937 183.400 M200.914 188.600 C 200.917 189.700,200.995 190.103,201.087 189.495 C 201.179 188.886,201.177 187.986,201.082 187.495 C 200.987 187.003,200.911 187.500,200.914 188.600 " stroke="none" fill="#e494ae" fill-rule="evenodd"></path><path id="path3" d="M264.125 214.699 C 267.604 214.766,273.184 214.766,276.525 214.699 C 279.866 214.632,277.020 214.578,270.200 214.578 C 263.380 214.578,260.646 214.633,264.125 214.699 " stroke="none" fill="#ef8faf" fill-rule="evenodd"></path><path id="path4" d="M240.000 45.200 L 240.000 76.800 241.200 76.800 L 242.400 76.800 242.400 45.200 L 242.400 13.600 241.200 13.600 L 240.000 13.600 240.000 45.200 M124.000 127.800 L 124.000 159.200 125.200 159.200 L 126.400 159.200 126.432 129.300 C 126.449 112.855,126.611 99.850,126.792 100.400 C 127.455 102.414,132.258 117.797,136.471 131.400 C 139.300 140.534,142.428 150.470,143.875 154.922 L 145.281 159.243 146.690 159.122 L 148.099 159.000 149.461 154.600 C 150.211 152.180,150.904 149.930,151.003 149.600 C 151.101 149.270,152.008 146.390,153.017 143.200 C 154.898 137.252,157.147 130.069,160.218 120.200 C 161.176 117.120,163.004 111.270,164.280 107.200 L 166.600 99.800 166.703 129.500 L 166.805 159.200 168.003 159.200 L 169.200 159.200 169.200 127.800 L 169.200 96.400 167.248 96.400 L 165.296 96.400 164.020 100.500 C 163.319 102.755,161.957 107.120,160.995 110.200 C 159.172 116.033,156.790 123.724,153.746 133.600 C 152.763 136.790,151.444 141.020,150.815 143.000 C 150.186 144.980,148.989 148.829,148.154 151.553 L 146.636 156.507 145.958 154.353 C 145.585 153.169,144.529 149.770,143.611 146.800 C 142.694 143.830,141.343 139.510,140.609 137.200 C 139.400 133.392,137.887 128.492,133.137 113.000 C 132.260 110.140,130.725 105.235,129.726 102.100 L 127.909 96.400 125.955 96.400 L 124.000 96.400 124.000 127.800 M189.200 186.182 L 189.200 198.400 191.436 198.400 L 193.671 198.400 193.536 190.233 C 193.461 185.741,193.433 182.098,193.473 182.139 C 193.576 182.242,200.000 198.126,200.000 198.276 C 200.000 198.344,201.080 198.400,202.400 198.400 L 204.800 198.400 204.800 186.200 L 204.800 174.000 203.000 174.000 L 201.200 174.000 201.187 182.300 L 201.173 190.600 197.887 182.400 L 194.600 174.200 191.900 174.082 L 189.200 173.963 189.200 186.182 M118.859 211.029 C 109.429 213.565,104.028 225.108,107.328 235.672 C 109.524 242.701,113.027 246.160,123.600 251.737 C 135.840 258.193,139.930 271.294,132.786 281.156 C 127.154 288.931,112.970 287.940,108.429 279.454 C 107.755 278.196,107.172 278.126,106.209 279.190 C 105.146 280.364,106.832 282.773,110.800 285.750 L 113.000 287.400 121.076 287.523 C 130.268 287.662,130.411 287.627,133.580 284.458 C 137.426 280.612,138.998 275.745,138.722 268.540 C 138.386 259.764,134.205 254.361,123.200 248.485 C 111.077 242.012,106.802 234.037,109.932 223.733 C 113.478 212.060,127.776 208.970,134.817 218.355 C 135.756 219.607,135.901 219.668,136.717 219.159 C 138.062 218.319,137.797 217.436,135.500 215.100 C 131.408 210.939,125.012 209.373,118.859 211.029 M255.386 212.495 C 255.280 212.773,255.240 229.740,255.297 250.200 L 255.400 287.400 256.700 287.525 L 258.000 287.651 258.000 268.625 L 258.000 249.600 269.400 249.600 L 280.800 249.600 280.800 248.400 L 280.800 247.200 269.400 247.200 L 258.000 247.200 258.000 230.800 L 258.000 214.400 270.227 214.400 L 282.453 214.400 282.327 213.300 L 282.200 212.200 268.890 212.095 C 258.456 212.012,255.537 212.098,255.386 212.495" stroke="none" fill="#f4a4c1" fill-rule="evenodd"></path></g></svg>
And here's the CSS..
body {
background: black;
}
.logo {
stroke: white;
stroke-width: 1;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: offset 4s linear forwards, .8s 5s forwards;
}
#keyframes offset {
100% {
stroke-dashoffset: 1;
}
}
#keyframes fill-it {
100% {
fill: #6fbc6d;
}
}
Thanks for any help!
Ok so your svg its so much disorganized so there is your new code :
body {
background: black;
}
#MUSIC {
width:auto;
height:320px;
}
#MMIS path{
/* stroke: white; */
stroke-width:3;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: offset 4s linear forwards;
}
#keyframes offset {
100% {
stroke-dashoffset: 1;
}
}
#keyframes fill-it {
100% {
/* fill: #6fbc6d; */
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="MUSIC" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="411.3 115.7 217.3 322" style="enable-background:new 411.3 115.7 217.3 322;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#F2DFDF;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:none;stroke:#F4A4C1;stroke-width:2;stroke-miterlimit:10;}
</style>
<g id="MMIS">
<path id="M" class="st0" d="M420.9,120.8l21.1,48.4l21.1-48.4h2.8v51.2h-1.9v-48.4l-21.2,48.4h-1.5l-21.1-48.1v48.1h-1.9v-51.2
H420.9z"/>
<path id="U" class="st0" d="M514.4,120.8v34.7c0,5.4-1.6,9.6-4.7,12.7c-3.1,3-7.4,4.6-12.8,4.6s-9.6-1.5-12.8-4.6
c-3.1-3-4.7-7.2-4.7-12.5v-34.8h1.9v34.6c0,4.7,1.4,8.5,4.3,11.3c2.8,2.8,6.6,4.1,11.3,4.1s8.5-1.4,11.3-4.1
c2.8-2.8,4.3-6.5,4.3-11.3v-34.6H514.4z"/>
<path id="S" class="st0" d="M558.5,159.7c0-2.2-0.5-4-1.5-5.5s-2.6-2.8-4.8-4s-5.5-2.3-9.9-3.6c-4.4-1.2-7.8-2.4-10-3.7
c-2.2-1.2-3.8-2.7-4.9-4.3c-1-1.6-1.5-3.6-1.5-6c0-3.7,1.6-6.7,4.7-9.1c3.1-2.3,7.2-3.5,12.3-3.5c3.3,0,6.2,0.6,8.8,1.9
c2.6,1.3,4.6,3.1,6.1,5.4c1.4,2.3,2.1,4.9,2.1,7.8H558c0-3.8-1.4-7-4.2-9.5s-6.5-3.7-10.9-3.7c-4.5,0-8.1,1-10.9,3
s-4.2,4.5-4.2,7.5c0,3.1,1.2,5.5,3.6,7.4c2.4,1.9,6.4,3.5,12,5s9.6,3.1,12.2,5c3.3,2.4,4.9,5.6,4.9,9.7c0,2.6-0.7,4.9-2.2,6.8
c-1.5,2-3.5,3.5-6.2,4.6s-5.7,1.6-9,1.6c-3.7,0-7-0.6-10-1.8s-5.2-3-6.7-5.3c-1.5-2.3-2.2-5-2.2-8.1h1.9c0,4.2,1.6,7.5,4.7,9.8
s7.2,3.5,12.3,3.5c4.5,0,8.2-1,11.1-3.1C557.1,165.6,558.5,163,558.5,159.7z"/>
<path id="I" class="st1" d="M573.8,171.9h-1.9v-51.2h1.9V171.9z"/>
<path id="C" class="st0" d="M624,156.3c-0.5,5.3-2.3,9.3-5.4,12.1c-3.1,2.8-7.4,4.2-12.8,4.2c-3.6,0-6.8-0.9-9.7-2.8
c-2.8-1.8-5-4.5-6.5-7.8c-1.5-3.4-2.3-7.3-2.4-11.6v-7.9c0-4.4,0.8-8.3,2.3-11.7c1.5-3.4,3.7-6.1,6.5-8c2.8-1.9,6.1-2.8,9.7-2.8
c5.3,0,9.6,1.4,12.8,4.2s5,6.8,5.5,12.1h-1.9c-0.5-4.7-2.2-8.3-4.9-10.7c-2.7-2.4-6.6-3.7-11.4-3.7c-5,0-9,1.9-12,5.6
c-3.1,3.8-4.6,8.8-4.6,15.1v7.5c0,4,0.7,7.6,2,10.7c1.4,3.1,3.3,5.5,5.9,7.3c2.5,1.7,5.5,2.6,8.7,2.6c4.9,0,8.7-1.2,11.5-3.6
c2.8-2.4,4.4-6,4.9-10.9H624z"/>
<path id="M_1_" class="st1" d="M430.9,207.2l21.1,48.4l21.1-48.4h2.8v51.2h-1.9V210l-21.2,48.4h-1.5l-21.1-48.1v48.1h-1.9v-51.2
H430.9z"/>
<path id="A" class="st0" d="M517.5,243h-25.1l-5.7,15.3h-2.1l19.2-51.2h2.3l19.2,51.2h-2.1L517.5,243z M493.1,241.1h23.7L505,209.4
L493.1,241.1z"/>
<path id="D" class="st0" d="M533.5,258.3v-51.2h14.2c4,0,7.5,0.9,10.8,2.8c3.2,1.9,5.7,4.5,7.6,7.9c1.8,3.4,2.8,7.2,2.8,11.4v6.6
c0,4.3-0.9,8.1-2.7,11.5c-1.8,3.4-4.3,6.1-7.5,8c-3.2,1.9-6.8,2.9-10.8,2.9H533.5z M535.4,209.1v47.4h12.3c3.6,0,6.8-0.9,9.8-2.6
c2.9-1.7,5.2-4.2,6.9-7.3s2.5-6.6,2.5-10.4v-6.6c0-3.8-0.8-7.3-2.4-10.4c-1.6-3.1-3.9-5.6-6.8-7.3c-2.9-1.8-6.1-2.7-9.7-2.7H535.4z
"/>
<path id="E" class="st0" d="M608.2,233h-25.7v23.5h29.3v1.9h-31.1v-51.2h31.1v1.9h-29.3v22h25.7V233z"/>
<path id="I_1_" class="st0" d="M501.5,335h-1.2v-31.7h1.2V335z"/>
<path id="N" class="st1" d="M537.1,335H536l-20.5-29.7V335h-1.2v-31.7h1.2l20.5,29.6v-29.6h1.2V335z"/>
<path id="S_1_" class="st1" d="M448.8,418.9c0-2.2-0.5-4-1.5-5.5s-2.6-2.8-4.8-4s-5.5-2.3-9.9-3.6c-4.4-1.2-7.8-2.4-10-3.7
c-2.2-1.2-3.8-2.7-4.9-4.3c-1-1.6-1.5-3.6-1.5-6c0-3.7,1.6-6.7,4.7-9.1c3.1-2.3,7.2-3.5,12.3-3.5c3.3,0,6.2,0.6,8.8,1.9
c2.6,1.3,4.6,3.1,6.1,5.4c1.4,2.3,2.1,4.9,2.1,7.8h-1.9c0-3.8-1.4-7-4.2-9.5s-6.5-3.7-10.9-3.7c-4.5,0-8.1,1-10.9,3
s-4.2,4.5-4.2,7.5c0,3.1,1.2,5.5,3.6,7.4c2.4,1.9,6.4,3.5,12,5s9.6,3.1,12.2,5c3.3,2.4,4.9,5.6,4.9,9.7c0,2.6-0.7,4.9-2.2,6.8
c-1.5,2-3.5,3.5-6.2,4.6c-2.7,1.1-5.7,1.6-9,1.6c-3.7,0-7-0.6-10-1.8s-5.2-3-6.7-5.3c-1.5-2.3-2.2-5-2.2-8.1h1.9
c0,4.2,1.6,7.5,4.7,9.8s7.2,3.5,12.3,3.5c4.5,0,8.2-1,11.1-3.1C447.4,424.8,448.8,422.2,448.8,418.9z"/>
<path id="H" class="st0" d="M497.2,431.1h-1.9v-25.4h-32.7v25.4h-1.9V380h1.9v23.9h32.7V380h1.9V431.1z"/>
<path id="E_1_" class="st0" d="M538.9,405.8h-25.7v23.5h29.3v1.9h-31.1V380h31.1v1.9h-29.3v22h25.7V405.8z"/>
<path id="E_2_" class="st0" d="M579.9,405.8h-25.7v23.5h29.3v1.9h-31.1V380h31.1v1.9h-29.3v22h25.7V405.8z"/>
<path id="F" class="st1" d="M621.4,405.9h-26.2v25.2h-1.9V380H625v1.9h-29.8V404h26.2V405.9z"/>
</g>
</svg>
Hope it help.
Check out "Animated line drawing in SVG" by Jake Archibald. This blog will walk you through creating your own self-drawing animation. Hopefully this is what you're looking for.
:-)
I have an Elasticsearch v2.4.1 index in which I store values from a JSON feed. Sometimes I get values separated by spaces in some fields, like:
"titulo" : "E l a ñ o q u e e l m e r c a d o d e j ó d e a s u s t a r"
This happens around 15% of the time and prevents queries such as:
localhost:9200/indice/_search?q=titulo:mercado
To match the document above.
I think the problem could be solved by using some sort of CharFilter, I thought of the N-gram filter but that does the opposite. I know this might be complex since ES should, at some level, infer the language (or maybe I could specify it); deal with ambiguities and so on...
Another examples of the same:
"title" : "El g a l a r d ó n se e n t r e g a r á el p r ó x i m o día 2 4"
"title" : "G a m a a c t u a l i z a d a d e b o m b a s d e calor A q u a t e r m i c"
"title" : "K a s p e r s k y : m á s q u e a n t i v i r u s"