Click Events to Change Complex SVG (Meteor) - javascript

So, I added some custom SVG icons to my web app using <img src="/svg.svg">.
I then decided that I wanted to add a toggleClass() to show a clicked state. This led me to a little jQuery snippet which converts an IMG to a full blown svg:
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
The result is that I end up getting a rather complicated SVG object, with a structure like this:
Parent: SVG
G
Path/Polygon
What I want, is to the target the entire SVG with a click event and to change the fill.
Template.tabsOne.events({
'click .replaced-svg': function(){
$(this).attr('fill', 'blue);
}
})
Unfortunately, I've tried several variations of the click handler and my svg refuses to change its fill. Any suggestions?
EDIT: here's one example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="209.217px" height="209.216px" viewBox="0 0 209.217 209.216" style="enable-background:new 0 0 209.217 209.216;" xml:space="preserve" class="svg custom-icon replaced-svg">
<g>
<polygon points="104.605,124.953 54.991,124.953 54.991,84.259 104.605,84.259 154.217,84.259 154.217,124.953 "></polygon>
<rect y="84.259" width="44.24" height="40.694"></rect>
<rect x="164.968" y="84.259" width="44.243" height="40.694"></rect>
<polygon points="209.217,73.509 159.593,73.509 109.98,73.509 109.98,22.174 209.217,22.174 "></polygon>
<polygon points="0,22.174 99.229,22.174 99.229,73.509 49.615,73.509 0,73.509 "></polygon>
<polygon points="0,135.704 49.615,135.704 99.229,135.704 99.229,187.042 0,187.042 "></polygon>
<polygon points="209.217,187.042 109.98,187.042 109.98,135.704 159.593,135.704 209.217,135.704 "></polygon>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Here's another one:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="512px" height="640px" viewBox="0 0 512 640" enable-background="new 0 0 512 640" xml:space="preserve" class="black svg custom-icon replaced-svg">
<path d="M165.438,474.562c49.922,49.922,131.031,49.922,180.969,0c49.906-49.922,49.906-131.047,0-180.961L165.438,474.562z M448,0.32L64,0C28.641,0,0,28.641,0,64v512c0,35.359,28.641,64,64,64h384c35.359,0,64-28.641,64-64V64 C512,28.641,483.359,0.32,448,0.32z M192,64c17.602,0,32,14.398,32,32s-14.398,32-32,32s-32-14.398-32-32S174.398,64,192,64z M96,64 c17.602,0,32,14.398,32,32s-14.398,32-32,32s-32-14.398-32-32S78.398,64,96,64z M256,576c-106.078,0-192-85.922-192-192 s85.922-192,192-192s192,85.922,192,192S362.078,576,256,576z" fill="#000000"></path>
</svg>


Something like this (you need to change the fill attribute on the <path> element):
$(document).ready(function(){
$('svg').click(function(e){
$(this).find('path').attr('fill', '#cc0000');
});
});
See this fiddle for a running example
So in your example, this change should do it:
Template.tabsOne.events({
'click .replaced-svg': function(){
$(this).find('path').attr('fill', 'blue');
}
})

Related

Inline css style fill all paths of an SVG image with 2 layers with javascript

I have this code to render SVG image with 2 layers:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 175.94 315.65" style="enable-background:new 0 0 175.94 315.65;" xml:space="preserve">
<g id="Layer_1">
<path class="st0" d="M18.87,132.57c5.5-2.4,10.1-6.46,15.56-8.94c5.93,1.66,11.11,5.28,17.02,7.01c2.66,0.73,5.6-1.75,5.27-4.51
c-0.89-6.06-2.93-11.91-3.89-17.97c3.87-4.32,8.15-8.29,11.65-12.92c2.13-2.28,0.96-6.65-2.25-7.12
c-5.91-1.21-12.12-0.48-17.95-1.96c-3.5-4.67-5.59-10.22-8.91-15c-1.61-2.73-6.41-2.77-7.73,0.25c-2.78,5.11-4.1,10.9-7.05,15.92
c-5.59,2.4-11.92,2.4-17.68,4.34c-2.4,0.74-3.66,3.97-2.44,6.15c3.86,5.26,10.4,8.04,14,13.44c-0.05,6.01-1.73,11.89-1.57,17.9
C13.08,132.03,16.35,133.61,18.87,132.57z M7.97,96.55c5.1-1.26,10.39-1.74,15.38-3.44c1.78-0.5,2.43-2.4,3.2-3.88
c1.77-4.04,3.31-8.18,5.21-12.16c2.46,3.85,4.56,7.91,6.92,11.83c0.92,1.41,1.95,3.14,3.85,3.24c5.06,0.73,10.2,0.83,15.28,1.47
c-3.21,4.07-7,7.64-10.26,11.67c-1.36,1.43-0.77,3.5-0.47,5.21c0.97,4.39,2.16,8.73,3.09,13.14c-4.08-1.6-8.02-3.51-12-5.3
c-1.86-0.84-4.12-1.53-6.03-0.46c-4.41,2.33-8.47,5.26-12.92,7.5c0.34-5.1,1.15-10.16,1.45-15.26c0.29-2-1.44-3.33-2.67-4.59
C14.69,102.49,11.04,99.84,7.97,96.55z"/>
<path class="st0" d="M91.31,36.4c-0.28,3.26-0.71,6.5-0.99,9.76c3.01-1.2,5.73-3.46,8.98-3.83c2.91,0.96,5.53,2.62,8.37,3.79
c-0.35-3.28-0.86-6.53-1.32-9.79c2.23-2.23,4.46-4.48,6.41-6.96c-2.97-0.59-6.01-0.83-8.92-1.64c-2.22-2.39-3.3-5.57-4.94-8.35
c-1.91,2.64-3.34,5.56-4.7,8.5c-3.1,0.53-6.2,0.97-9.28,1.58C86.77,32.01,89,34.26,91.31,36.4z"/>
</g>
<g id="Layer_2">
<path class="st0" d="M131.76,6.63c-4.41-2.49-8.64-6.53-13.79-6.63c-3.51-0.07-3.26,4.66-1.31,6.69
c11.46,16.14,17.89,35.91,17.57,55.74c-0.11,31.34-16.95,62.09-43.45,78.87c-16.18,10.43-35.6,15.92-54.87,14.88
c-5.34,0.24-11.48-3.97-15.92-0.97c-1.16,0.78-1.2,3.01,0.04,4.1c2.29,2.42,5.11,4.24,7.8,6.19c-0.06,37.67-0.08,75.34,0.01,113
c0.06,4.19-2.57,7.7-4.24,11.36c-4.12,0.73-8.31,1.1-12.38,2.07c-0.09,0.36-0.29,1.08-0.38,1.44c2.63,3.25,6.28,5.59,8.65,9.05
c-0.23,4.44-1.44,8.77-1.54,13.23c4.23-1.58,8.16-3.83,12.08-6.04c4.13,2.01,8.13,4.35,12.5,5.83c-0.34-4.45-1.19-8.83-2.11-13.18
c3.1-3.45,6.57-6.55,9.5-10.15c-4.38-1.22-8.9-1.75-13.4-2.27c-1.79-3.61-4.57-7.09-4.3-11.34c0.05-36.71-0.03-73.43,0.04-110.14
c13.71,7.75,29.09,12.61,44.88,13.24c0.09,5.62,0.04,11.23,0.11,16.85c-0.08,2.38,0.32,5.05-1.26,7.07
c-3.67,5.49-5.56,11.88-8.18,17.88c-5.89,1.57-11.95,2.38-17.8,4.05c-3.11,0.8-3.82,5.35-1.48,7.39c4,4.19,9.07,7.27,12.89,11.66
c0.36,6.3-1.72,12.49-1.31,18.79c0.23,2.84,4.14,4.25,6.43,2.86c5.2-2.8,10.04-6.25,15.27-9.04c5.47,2.35,10.67,5.38,16.36,7.21
c2.26,0.79,5.06-0.8,5.49-3.14c0.25-6.63-3.46-12.78-3.39-19.34c3.36-4.62,7.94-8.22,11.32-12.83c1.92-2.2,1-6.45-2.06-7.04
c-6.02-1.29-12.24-0.91-18.32-1.84c-3.07-5.8-6.85-11.23-9.61-17.17c-0.54-7.72,0.07-15.49-0.29-23.23
c26.26-0.27,52.18-11.62,69.93-31.01c13.2-14.35,21.7-32.94,23.98-52.3C179.8,62.89,162.27,25.51,131.76,6.63z M86.98,226.42
c0.83,1.39,2.55,1.47,3.99,1.68c4.65,0.49,9.33,0.76,13.99,1.32c-2.79,3.22-5.67,6.36-8.55,9.49c-1.29,1.53-3.06,3.25-2.55,5.47
c0.78,5.06,2.33,9.96,3.26,15c-4.81-1.94-9.41-4.4-14.29-6.15c-1.76-0.9-3.45,0.31-4.96,1.1c-3.96,2.3-7.78,4.81-11.75,7.08
c0.35-5.28,1.44-10.5,1.59-15.79c0.2-1.9-1.47-3.11-2.64-4.3c-3.3-2.95-6.84-5.63-9.83-8.9c5.02-1.43,10.28-1.87,15.24-3.52
c1.74-0.51,2.35-2.39,3.09-3.85c1.74-4.07,3.37-8.2,5.28-12.2C81.77,217.25,83.92,222.12,86.98,226.42z"/>
</g>
</svg>
Now I have a span element with background color and class "check" assigned:
<span class="check" style="background-color: #4d1b18">Brown</span>
and the JS code:
<script type="text/javascript">
var svg = document.querySelector('span.check');
var layer1 = document.querySelector('#Layer_1');
var matches = layer1.querySelector('path');
matches.style.fill = svg.style.backgroundColor;
</script>
You can check the fiddle here.
As you can see, the fill is applied only to the first path of #layer_1 the second path in same ID as well (there may be even more).
How to inline the style to all path inside the Layer_1 ID ?

Try this:
var svg = document.querySelector('span.check');
var layer1 = document.querySelector('#Layer_1');
var matches = layer1.querySelectorAll('path');
matches.forEach(fillColor);
function fillColor(item, index) {
matches[index].style.fill = svg.style.backgroundColor;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 175.94 315.65" style="enable-background:new 0 0 175.94 315.65;" xml:space="preserve">
<g id="Layer_1">
<path class="st0" d="M18.87,132.57c5.5-2.4,10.1-6.46,15.56-8.94c5.93,1.66,11.11,5.28,17.02,7.01c2.66,0.73,5.6-1.75,5.27-4.51
c-0.89-6.06-2.93-11.91-3.89-17.97c3.87-4.32,8.15-8.29,11.65-12.92c2.13-2.28,0.96-6.65-2.25-7.12
c-5.91-1.21-12.12-0.48-17.95-1.96c-3.5-4.67-5.59-10.22-8.91-15c-1.61-2.73-6.41-2.77-7.73,0.25c-2.78,5.11-4.1,10.9-7.05,15.92
c-5.59,2.4-11.92,2.4-17.68,4.34c-2.4,0.74-3.66,3.97-2.44,6.15c3.86,5.26,10.4,8.04,14,13.44c-0.05,6.01-1.73,11.89-1.57,17.9
C13.08,132.03,16.35,133.61,18.87,132.57z M7.97,96.55c5.1-1.26,10.39-1.74,15.38-3.44c1.78-0.5,2.43-2.4,3.2-3.88
c1.77-4.04,3.31-8.18,5.21-12.16c2.46,3.85,4.56,7.91,6.92,11.83c0.92,1.41,1.95,3.14,3.85,3.24c5.06,0.73,10.2,0.83,15.28,1.47
c-3.21,4.07-7,7.64-10.26,11.67c-1.36,1.43-0.77,3.5-0.47,5.21c0.97,4.39,2.16,8.73,3.09,13.14c-4.08-1.6-8.02-3.51-12-5.3
c-1.86-0.84-4.12-1.53-6.03-0.46c-4.41,2.33-8.47,5.26-12.92,7.5c0.34-5.1,1.15-10.16,1.45-15.26c0.29-2-1.44-3.33-2.67-4.59
C14.69,102.49,11.04,99.84,7.97,96.55z"/>
<path class="st0" d="M91.31,36.4c-0.28,3.26-0.71,6.5-0.99,9.76c3.01-1.2,5.73-3.46,8.98-3.83c2.91,0.96,5.53,2.62,8.37,3.79
c-0.35-3.28-0.86-6.53-1.32-9.79c2.23-2.23,4.46-4.48,6.41-6.96c-2.97-0.59-6.01-0.83-8.92-1.64c-2.22-2.39-3.3-5.57-4.94-8.35
c-1.91,2.64-3.34,5.56-4.7,8.5c-3.1,0.53-6.2,0.97-9.28,1.58C86.77,32.01,89,34.26,91.31,36.4z"/>
</g>
<g id="Layer_2">
<path class="st0" d="M131.76,6.63c-4.41-2.49-8.64-6.53-13.79-6.63c-3.51-0.07-3.26,4.66-1.31,6.69
c11.46,16.14,17.89,35.91,17.57,55.74c-0.11,31.34-16.95,62.09-43.45,78.87c-16.18,10.43-35.6,15.92-54.87,14.88
c-5.34,0.24-11.48-3.97-15.92-0.97c-1.16,0.78-1.2,3.01,0.04,4.1c2.29,2.42,5.11,4.24,7.8,6.19c-0.06,37.67-0.08,75.34,0.01,113
c0.06,4.19-2.57,7.7-4.24,11.36c-4.12,0.73-8.31,1.1-12.38,2.07c-0.09,0.36-0.29,1.08-0.38,1.44c2.63,3.25,6.28,5.59,8.65,9.05
c-0.23,4.44-1.44,8.77-1.54,13.23c4.23-1.58,8.16-3.83,12.08-6.04c4.13,2.01,8.13,4.35,12.5,5.83c-0.34-4.45-1.19-8.83-2.11-13.18
c3.1-3.45,6.57-6.55,9.5-10.15c-4.38-1.22-8.9-1.75-13.4-2.27c-1.79-3.61-4.57-7.09-4.3-11.34c0.05-36.71-0.03-73.43,0.04-110.14
c13.71,7.75,29.09,12.61,44.88,13.24c0.09,5.62,0.04,11.23,0.11,16.85c-0.08,2.38,0.32,5.05-1.26,7.07
c-3.67,5.49-5.56,11.88-8.18,17.88c-5.89,1.57-11.95,2.38-17.8,4.05c-3.11,0.8-3.82,5.35-1.48,7.39c4,4.19,9.07,7.27,12.89,11.66
c0.36,6.3-1.72,12.49-1.31,18.79c0.23,2.84,4.14,4.25,6.43,2.86c5.2-2.8,10.04-6.25,15.27-9.04c5.47,2.35,10.67,5.38,16.36,7.21
c2.26,0.79,5.06-0.8,5.49-3.14c0.25-6.63-3.46-12.78-3.39-19.34c3.36-4.62,7.94-8.22,11.32-12.83c1.92-2.2,1-6.45-2.06-7.04
c-6.02-1.29-12.24-0.91-18.32-1.84c-3.07-5.8-6.85-11.23-9.61-17.17c-0.54-7.72,0.07-15.49-0.29-23.23
c26.26-0.27,52.18-11.62,69.93-31.01c13.2-14.35,21.7-32.94,23.98-52.3C179.8,62.89,162.27,25.51,131.76,6.63z M86.98,226.42
c0.83,1.39,2.55,1.47,3.99,1.68c4.65,0.49,9.33,0.76,13.99,1.32c-2.79,3.22-5.67,6.36-8.55,9.49c-1.29,1.53-3.06,3.25-2.55,5.47
c0.78,5.06,2.33,9.96,3.26,15c-4.81-1.94-9.41-4.4-14.29-6.15c-1.76-0.9-3.45,0.31-4.96,1.1c-3.96,2.3-7.78,4.81-11.75,7.08
c0.35-5.28,1.44-10.5,1.59-15.79c0.2-1.9-1.47-3.11-2.64-4.3c-3.3-2.95-6.84-5.63-9.83-8.9c5.02-1.43,10.28-1.87,15.24-3.52
c1.74-0.51,2.35-2.39,3.09-3.85c1.74-4.07,3.37-8.2,5.28-12.2C81.77,217.25,83.92,222.12,86.98,226.42z"/>
</g>
</svg>
<span class="check" style="background-color: #0f0">Green</span>

Add filter to SVG dynamically

I have the following SVG image inline on a webpage:
const svg = document.getElementById('svg');
const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
filter.setAttribute('id', 'image');
filter.setAttribute('x', '0%');
filter.setAttribute('y', '0%');
filter.setAttribute('width', '100%');
filter.setAttribute('height', '100%');
const feImage = document.createElementNS('http://www.w3.org/2000/svg', 'feImage');
feImage.setAttribute('xlink:href', 'http://lorempixel.com/100/100/');
filter.appendChild(feImage);
svg.querySelector('defs').appendChild(filter);
svg.querySelector('circle').setAttribute('filter', 'url(#image)');
<svg width="200" height="200" viewBox="0 0 200 200" id="svg">
<defs></defs>
<circle cx="100" cy="100" r="50" fill="none" stroke-width="2" stroke="gray"></circle>
</svg>
Now I would like to add an image filter to this svg dynamically and then apply the filter to the circle. But what happens is the circle becomes invisible the filter does not work.
When I add the filter to the svg hardcoded everything works just fine:
<svg width="200" height="200" viewBox="0 0 200 200" id="svg">
<defs>
<filter id="image" x="0%" y="0%" width="100%" height="100%">
<feImage xlink:href="http://lorempixel.com/100/100/"></feImage>
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="none" stroke-width="2" stroke="gray" filter="url(#image)"></circle>
</svg>
My question is why doesn't this work?

You need to use: document.createElementNS(…) for svg elements and in this case setAttributeNS(…) as well;
For instance change:
const filter = document.createElement('filter');
to
const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
Additionally change:
feImage.setAttribute('xlink:href', 'http://lorempixel.com/100/100/');
to
feImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://lorempixel.com/100/100/');
fiddle

move SVG group on path trail based on percentage of whole path trail

I am trying to find a way to move an group (id="avatar") inside an SVG with jQuery based on an percentage of the whole trail of an path element (id="path" > path), inside the SVG.
So set the avatar with transform->translate to the right position dynamically for example 20% of the trail. So te input is 20, then it should be set on 20% of the trail of #path > path.
I can't find any sort of function or parsing mechanism to archive this goal.
Any suggestions?
The SVG is used in the browser as an whole SVG html5 element with all their nested SVG tags. So not loade like in an img->src.
SVG image:
SVG code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 600" xml:space="preserve">
<style type="text/css">
.st5{fill:#43A592;stroke:#8C6239;stroke-width:0.5;stroke-miterlimit:10;}
.st6{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;}
.st7{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;stroke-dasharray:5.0414,12.0993;}
.st8{fill:#405813;}
.st9{fill:#7FBFD6;}
</style>
<g id="path">
<path class="st7" d="M253.83,291.92C438.6,278.28,338.5,457,422.2,429.99c87.72-28.31-71.17-110.68,22.64-190.57
c54.07-46.05,161.79-22.03,138.18,79.89c-13.69,59.11-53.79,87.21-30.99,132.4c0,0,20.26,23.49,61.35,18.96"/>
</g>
<g id="avatar" transform="translate(10,20)">
<g>
<g>
<circle class="st9" cx="276.22" cy="290.06" r="26.83"/>
<path class="st8" d="M276.22,317.69c-15.23,0-27.62-12.39-27.62-27.62s12.39-27.62,27.62-27.62s27.62,12.39,27.62,27.62
S291.45,317.69,276.22,317.69z M276.22,264.04c-14.35,0-26.03,11.68-26.03,26.03s11.68,26.03,26.03,26.03
s26.03-11.68,26.03-26.03S290.57,264.04,276.22,264.04z"/>
</g>
<g>
<g>
<path class="st16" d="M264.95,293.51c-0.35-0.11-0.74,0.03-0.93,0.35l-4.62,7.56c-0.35,0.58,0.02,1.33,0.7,1.39
c3.16,0.29,11.31,1.43,23.76,5.78c0.44,0.15,0.86-0.3,0.65-0.73C283.15,305.1,278.44,297.84,264.95,293.51z"/>
</g>
<g>
<path class="st16" d="M284.68,279.17c-2.01-6.83-8.8-10.85-15.17-8.97c-0.04,0.01-0.09,0.03-0.13,0.04
c-0.06-0.01-0.13-0.01-0.19-0.02c-0.07,0.05-0.13,0.09-0.19,0.14c-6.04,2.09-9.34,8.94-7.39,15.59c0,0-0.76,2.95-2.22,5.82
c0,0,6.79-0.4,8.31-7.6c0,0,0.02,0.05,0,0l9.33-2.75c0.01,0.03,0,0,0,0c8.13,6.32,13.75,1.44,13.75,1.44
S287.35,280.89,284.68,279.17z"/>
</g>
<g>
<path class="st8" d="M296.91,298.57c-0.04-0.3-0.29-0.52-0.59-0.52h-3.56c-0.33,0-0.6,0.27-0.6,0.6c0,1.34-0.33,1.94-0.6,2.2
c-0.18,0.18-0.4,0.27-0.65,0.26c-0.47-0.01-1.14-0.76-1.62-1.83c-1.25-2.77-3.05-3.78-4.49-4.12v-1.83
c0-0.07,0.06-0.12,0.12-0.12h1.72c0.09,0,0.19-0.02,0.27-0.06c0.25-0.12,0.37-0.39,0.33-0.64c-0.46-2.69-1.3-5.53-1.85-7.27
c3.56-0.05,5.75-1.89,5.78-1.92c0.15-0.13,0.22-0.32,0.2-0.51c-0.02-0.19-0.13-0.36-0.3-0.46c-0.03-0.02-3.07-1.76-5.62-3.38
c-0.17-0.11-0.31-0.28-0.37-0.47c-2.19-6.54-8.67-10.46-14.95-9.07l0.35-0.89c0.12-0.31-0.04-0.67-0.36-0.78
c-0.31-0.11-0.65,0.07-0.77,0.37l-0.34,0.87c-0.05,0.14-0.23,0.19-0.35,0.1l-0.69-0.52c-0.27-0.2-0.65-0.14-0.85,0.13
c-0.19,0.27-0.11,0.64,0.15,0.84l0.74,0.55c-5.7,2.43-8.79,9.05-7.12,15.55c0.05,0.2,0.04,0.4-0.03,0.59
c-0.34,0.99-1.18,3.34-2.03,5.27c-0.07,0.15-0.08,0.32-0.02,0.47c0.09,0.24,0.32,0.38,0.56,0.38c0.01,0,0.03,0,0.04,0
c0.04,0,2.17-0.17,4.39-1.48c0.22,0.56,0.48,1.26,0.69,2.01c-0.4,0.06-0.78,0.29-1,0.66c0,0,0,0,0,0l-4.62,7.56
c-0.28,0.45-0.3,1-0.06,1.47c0.24,0.47,0.69,0.78,1.21,0.83c2.93,0.27,11.11,1.37,23.62,5.75c0.12,0.04,0.25,0.06,0.37,0.06
c0.32,0,0.62-0.13,0.84-0.38c0.3-0.34,0.37-0.83,0.17-1.24c-0.72-1.48-2.29-4.05-5.38-6.8c0.84,0.21,1.68,0.35,2.49,0.42
c0.07,0.01,0.14,0.01,0.2,0.01c0.64,0,1.26-0.23,1.72-0.66c0.47-0.43,0.72-1.02,0.72-1.67v-2.29c2.23,0.86,2.77,2.18,3.39,3.7
c0.38,0.93,0.76,1.89,1.54,2.82c0.8,0.96,1.75,1.43,2.91,1.43c0.27,0,0.56-0.03,0.85-0.08
C296.75,303.92,297.15,300.37,296.91,298.57z M285.22,280.22c1.65,1.04,3.43,2.09,4.44,2.68c-1.61,0.93-5.77,2.54-11.3-1.25
l5.51-1.62C284.32,279.9,284.81,279.97,285.22,280.22z M272.69,270.34c4.78,0,9.32,3.21,11.14,8.16
c0.05,0.15-0.03,0.3-0.18,0.35l-5.99,1.76c-0.1,0.03-0.21-0.03-0.24-0.14c-0.25-1-0.74-2.77-1.58-4.6
c-1.2-2.63-2.68-4.48-4.37-5.47C271.89,270.36,272.29,270.34,272.69,270.34z M269.12,271.08c0.15-0.15,0.37-0.21,0.57-0.15
c4.12,1.11,6.06,7.7,6.59,9.9c0.02,0.1-0.03,0.2-0.13,0.23l-7.73,2.27c-0.1,0.03-0.2-0.02-0.23-0.12
C267.48,281.06,265.68,274.45,269.12,271.08z M266.97,272c-0.94,1.77-1.27,4.06-0.98,6.79c0.22,2.01,0.72,3.77,1.04,4.74
c0.03,0.1-0.02,0.21-0.13,0.24l-4.61,1.35c-0.15,0.04-0.3-0.05-0.34-0.2C260.81,279.76,262.91,274.58,266.97,272z
M261.95,286.82c0.08-0.24,0.28-0.42,0.52-0.49l4.57-1.34c-1.35,4.32-4.91,5.64-6.67,6.03
C261.03,289.4,261.63,287.72,261.95,286.82z M283.89,307.97c-12.54-4.37-20.77-5.48-23.74-5.75c-0.16-0.01-0.23-0.13-0.25-0.17
c-0.02-0.05-0.07-0.18,0.01-0.31c0,0,4.62-7.56,4.62-7.56c0.05-0.08,0.15-0.12,0.24-0.09c4.49,1.44,8.93,3.51,12.67,6.42
C280.02,302.53,282.4,305.02,283.89,307.97z M283.61,292.61v6.31c0,0.39-0.19,0.64-0.34,0.79c-0.26,0.24-0.63,0.36-1.02,0.33
c-1.17-0.09-2.44-0.37-3.64-0.79c-1.06-0.37-2.07-0.89-3.02-1.5c-1.62-1.04-3.49-2.05-5.65-2.99l0.5-2.38
c0.07-0.31-0.13-0.6-0.44-0.7c-1.28-0.42-1.67-1.57-1.78-2.09c-0.27-1.19,0.05-2.43,0.76-3.03c1.42-1.2,2.76-0.33,2.89-0.25
c0.24,0.15,0.43,0.18,0.67,0.05c0.11-0.06,0.19-0.19,0.22-0.29c0.29-0.78,0.7-2.03,1.06-3.08l3.08-0.91
c2.69,2.03,5.14,2.88,7.21,3.1c0.49,1.49,1.29,4.12,1.8,6.69c0.02,0.08-0.04,0.15-0.12,0.15h-1.58
C283.88,292.01,283.61,292.28,283.61,292.61z"/>
</g>
</g>
</g>
</g>
</svg>

In order to get the position of a point on a path you need to use path.getPointAtLength.
Here is what I've done:
I've moved the avatar in a <defs> element so that I can use it latter.
Also I've translated everything in the avatar in the origin of the svg canvas.
The <use> elements can get an x and a y attributes in order to be able to position the used element on the svg canvas. In Javascript I'm calculating the x and y for the avatar using the path.getPointAtLength method.
In this demo an input type range changes the position of the avatar on the path;
In your code you have a transform attribute for the avatar. I'm using this transform for the use element.
Also: for the demo I've changed the value of the viewBox attribute of your svg element. You may change it back at what you want.
let pathlength = path.getTotalLength();
let pos = path.getPointAtLength(0);
theUse.setAttributeNS(null,"x", pos.x);
theUse.setAttributeNS(null,"y", pos.y);
theRange.addEventListener("input", ()=>{
let perc = parseInt(theRange.value);
let leng = pathlength * perc/100;
pos = path.getPointAtLength(leng);
theUse.setAttributeNS(null,"x", pos.x);
theUse.setAttributeNS(null,"y", pos.y);
})
svg{border:1px solid;overflow:visible; width:95vh; display:block; margin:1em auto;}
<input type="range" id="theRange" value="0"/>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="230 200 400 300" xml:space="preserve">
<style type="text/css">
.st5{fill:#43A592;stroke:#8C6239;stroke-width:0.5;stroke-miterlimit:10;}
.st6{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;}
.st7{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;stroke-dasharray:5.0414,12.0993;}
.st8{fill:#405813;}
.st9{fill:#7FBFD6;}
</style>
<defs>
<g id="avatar" transform="translate(-276.22, -290.06)">
<g>
<g>
<circle class="st9" cx="276.22" cy="290.06" r="26.83"/>
<path class="st8" d="M276.22,317.69c-15.23,0-27.62-12.39-27.62-27.62s12.39-27.62,27.62-27.62s27.62,12.39,27.62,27.62
S291.45,317.69,276.22,317.69z M276.22,264.04c-14.35,0-26.03,11.68-26.03,26.03s11.68,26.03,26.03,26.03
s26.03-11.68,26.03-26.03S290.57,264.04,276.22,264.04z"/>
</g>
<g>
<g>
<path class="st16" d="M264.95,293.51c-0.35-0.11-0.74,0.03-0.93,0.35l-4.62,7.56c-0.35,0.58,0.02,1.33,0.7,1.39
c3.16,0.29,11.31,1.43,23.76,5.78c0.44,0.15,0.86-0.3,0.65-0.73C283.15,305.1,278.44,297.84,264.95,293.51z"/>
</g>
<g>
<path class="st16" d="M284.68,279.17c-2.01-6.83-8.8-10.85-15.17-8.97c-0.04,0.01-0.09,0.03-0.13,0.04
c-0.06-0.01-0.13-0.01-0.19-0.02c-0.07,0.05-0.13,0.09-0.19,0.14c-6.04,2.09-9.34,8.94-7.39,15.59c0,0-0.76,2.95-2.22,5.82
c0,0,6.79-0.4,8.31-7.6c0,0,0.02,0.05,0,0l9.33-2.75c0.01,0.03,0,0,0,0c8.13,6.32,13.75,1.44,13.75,1.44
S287.35,280.89,284.68,279.17z"/>
</g>
<g>
<path class="st8" d="M296.91,298.57c-0.04-0.3-0.29-0.52-0.59-0.52h-3.56c-0.33,0-0.6,0.27-0.6,0.6c0,1.34-0.33,1.94-0.6,2.2
c-0.18,0.18-0.4,0.27-0.65,0.26c-0.47-0.01-1.14-0.76-1.62-1.83c-1.25-2.77-3.05-3.78-4.49-4.12v-1.83
c0-0.07,0.06-0.12,0.12-0.12h1.72c0.09,0,0.19-0.02,0.27-0.06c0.25-0.12,0.37-0.39,0.33-0.64c-0.46-2.69-1.3-5.53-1.85-7.27
c3.56-0.05,5.75-1.89,5.78-1.92c0.15-0.13,0.22-0.32,0.2-0.51c-0.02-0.19-0.13-0.36-0.3-0.46c-0.03-0.02-3.07-1.76-5.62-3.38
c-0.17-0.11-0.31-0.28-0.37-0.47c-2.19-6.54-8.67-10.46-14.95-9.07l0.35-0.89c0.12-0.31-0.04-0.67-0.36-0.78
c-0.31-0.11-0.65,0.07-0.77,0.37l-0.34,0.87c-0.05,0.14-0.23,0.19-0.35,0.1l-0.69-0.52c-0.27-0.2-0.65-0.14-0.85,0.13
c-0.19,0.27-0.11,0.64,0.15,0.84l0.74,0.55c-5.7,2.43-8.79,9.05-7.12,15.55c0.05,0.2,0.04,0.4-0.03,0.59
c-0.34,0.99-1.18,3.34-2.03,5.27c-0.07,0.15-0.08,0.32-0.02,0.47c0.09,0.24,0.32,0.38,0.56,0.38c0.01,0,0.03,0,0.04,0
c0.04,0,2.17-0.17,4.39-1.48c0.22,0.56,0.48,1.26,0.69,2.01c-0.4,0.06-0.78,0.29-1,0.66c0,0,0,0,0,0l-4.62,7.56
c-0.28,0.45-0.3,1-0.06,1.47c0.24,0.47,0.69,0.78,1.21,0.83c2.93,0.27,11.11,1.37,23.62,5.75c0.12,0.04,0.25,0.06,0.37,0.06
c0.32,0,0.62-0.13,0.84-0.38c0.3-0.34,0.37-0.83,0.17-1.24c-0.72-1.48-2.29-4.05-5.38-6.8c0.84,0.21,1.68,0.35,2.49,0.42
c0.07,0.01,0.14,0.01,0.2,0.01c0.64,0,1.26-0.23,1.72-0.66c0.47-0.43,0.72-1.02,0.72-1.67v-2.29c2.23,0.86,2.77,2.18,3.39,3.7
c0.38,0.93,0.76,1.89,1.54,2.82c0.8,0.96,1.75,1.43,2.91,1.43c0.27,0,0.56-0.03,0.85-0.08
C296.75,303.92,297.15,300.37,296.91,298.57z M285.22,280.22c1.65,1.04,3.43,2.09,4.44,2.68c-1.61,0.93-5.77,2.54-11.3-1.25
l5.51-1.62C284.32,279.9,284.81,279.97,285.22,280.22z M272.69,270.34c4.78,0,9.32,3.21,11.14,8.16
c0.05,0.15-0.03,0.3-0.18,0.35l-5.99,1.76c-0.1,0.03-0.21-0.03-0.24-0.14c-0.25-1-0.74-2.77-1.58-4.6
c-1.2-2.63-2.68-4.48-4.37-5.47C271.89,270.36,272.29,270.34,272.69,270.34z M269.12,271.08c0.15-0.15,0.37-0.21,0.57-0.15
c4.12,1.11,6.06,7.7,6.59,9.9c0.02,0.1-0.03,0.2-0.13,0.23l-7.73,2.27c-0.1,0.03-0.2-0.02-0.23-0.12
C267.48,281.06,265.68,274.45,269.12,271.08z M266.97,272c-0.94,1.77-1.27,4.06-0.98,6.79c0.22,2.01,0.72,3.77,1.04,4.74
c0.03,0.1-0.02,0.21-0.13,0.24l-4.61,1.35c-0.15,0.04-0.3-0.05-0.34-0.2C260.81,279.76,262.91,274.58,266.97,272z
M261.95,286.82c0.08-0.24,0.28-0.42,0.52-0.49l4.57-1.34c-1.35,4.32-4.91,5.64-6.67,6.03
C261.03,289.4,261.63,287.72,261.95,286.82z M283.89,307.97c-12.54-4.37-20.77-5.48-23.74-5.75c-0.16-0.01-0.23-0.13-0.25-0.17
c-0.02-0.05-0.07-0.18,0.01-0.31c0,0,4.62-7.56,4.62-7.56c0.05-0.08,0.15-0.12,0.24-0.09c4.49,1.44,8.93,3.51,12.67,6.42
C280.02,302.53,282.4,305.02,283.89,307.97z M283.61,292.61v6.31c0,0.39-0.19,0.64-0.34,0.79c-0.26,0.24-0.63,0.36-1.02,0.33
c-1.17-0.09-2.44-0.37-3.64-0.79c-1.06-0.37-2.07-0.89-3.02-1.5c-1.62-1.04-3.49-2.05-5.65-2.99l0.5-2.38
c0.07-0.31-0.13-0.6-0.44-0.7c-1.28-0.42-1.67-1.57-1.78-2.09c-0.27-1.19,0.05-2.43,0.76-3.03c1.42-1.2,2.76-0.33,2.89-0.25
c0.24,0.15,0.43,0.18,0.67,0.05c0.11-0.06,0.19-0.19,0.22-0.29c0.29-0.78,0.7-2.03,1.06-3.08l3.08-0.91
c2.69,2.03,5.14,2.88,7.21,3.1c0.49,1.49,1.29,4.12,1.8,6.69c0.02,0.08-0.04,0.15-0.12,0.15h-1.58
C283.88,292.01,283.61,292.28,283.61,292.61z"/>
</g>
</g>
</g>
</g>
</defs>
<g>
<path class="st7" id="path" d="M253.83,291.92C438.6,278.28,338.5,457,422.2,429.99c87.72-28.31-71.17-110.68,22.64-190.57
c54.07-46.05,161.79-22.03,138.18,79.89c-13.69,59.11-53.79,87.21-30.99,132.4c0,0,20.26,23.49,61.35,18.96"/>
</g>
<use id="theUse" transform="translate(0,20)" xlink:href="#avatar" />
</svg>

Hide svg at start and still being animatable with animjs (opacity: 1) again

Let's take this simple svg as an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.49 31.49" style="enable-background:new 0 0 31.49 31.49;" xml:space="preserve">
<path style="fill:#1E201D;"
d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111 C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587 c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
In the beginning of my script when the doc has loaded, I find the element and hides it.
const loading_svg = document.getElementById('loading-svg');
// initialize server-svg as invisible
anime({
targets: [loading_svg],
opacity: 0
});
However, that resolves in some issues: See example
The goal
The goal is now to later have it appear when the user hover over something; therefor it is important to have it initialized as hidden to start off. Now, this is a bad approach, as it is first able to hide the svg when the document has loaded, which means that it is going to look something like this: (note that you can see the svg in a split second before it dissappearing) See example
What have I tried?
I have tried setting the opacity css attribute of the svg to 0. Then when the user has hovered over a specific item tried doing:
// initialize server-svg as invisible
anime({
targets: [loading_svg],
opacity: 1
});
However, that does not work.
I am not sure how animejs hides svg's whenever you set the opacity attribute to 0, but it doesn't seem like it sets the css opacity attribute of the svg to 0. This also explains why it animejs is unable to "unhide" the svg if its css opacity attribute is sat to 0.
Simplified fiddle demonstrating the issue:
anime({
targets: document.getElementsByTagName('svg'),
opacity: 1
});
svg {
opacity: 0
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.49 31.49" style="enable-background:new 0 0 31.49 31.49;" xml:space="preserve">
<path style="fill:#1E201D;"
d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111 C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587 c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>

Added svg image into canvas using fabric.js not visible in firefox

I am adding background svg image to my canvas using fabric.js in my angular.js application, the background is visible perfectly in chrome but not in firefox, I have provided js code and svg.
I am using firefox 47.0.1 on OSX 10.11.5
Why it is not visible in firefox?
Any help will be appreciated.
var image="mysvg.svg";
$window.fabric.Image.fromURL(image, function(oImg) {
oImg.width = width;
oImg.height = height;
oImg.lockMovementX = true;
oImg.lockMovementY = true;
oImg.lockRotation = true;
oImg.lockScalingX = true;
oImg.lockScalingY = true;
oImg.selectable = false;
oImg.selectable = false;
oImg.id = 'bg_image';
canvas.centerObject(oImg)
.add(oImg)
.sendToBack(oImg)
.renderAll();
});
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 921.3 921.3" style="enable-background:new 0 0 921.3 921.3;" xml:space="preserve">
<style type="text/css">
.st0{fill:#DEDEDE;}
.st1{fill:none;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;}
</style>
<g id="Jacket_Spine">
<g id="jacket">
<g>
<polygon class="st0" points="719.3,420.1 200.7,420.1 17,471.7 903,471.7 "/>
</g>
</g>
<rect id="Spine_1_" x="17" y="471.8" class="st1" width="887.2" height="11.3"/>
</g>
</svg>

You are hitting a firefox bug wher a svg without specified width and height cannot be drawn on canvas.
You should modify your SVG and add a width and height to it.
Also the code to add the image as background could be made simpler, unless you have some reason to have it in that way.
Here is the firefox BUG just as a reference:
https://bugzilla.mozilla.org/show_bug.cgi?id=700533
Probably the image will not show on internet explorer 11 also.
var image="mysvg.svg";
fabric.Image.fromURL(image, function(oImg) {
canvas.bakgroundImage = oImg;
canvas.renderAll();
});
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="922" height="922" viewBox="0 0 921.3 921.3" style="enable-background:new 0 0 921.3 921.3;" xml:space="preserve">
<style type="text/css">
.st0{fill:#DEDEDE;}
.st1{fill:none;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;}
</style>
<g id="Jacket_Spine">
<g id="jacket">
<g>
<polygon class="st0" points="719.3,420.1 200.7,420.1 17,471.7 903,471.7 "/>
</g>
</g>
<rect id="Spine_1_" x="17" y="471.8" class="st1" width="887.2" height="11.3"/>
</g>
</svg>

Categories