Develop Reference

Detect what element of svg image within HTML Canvas is clicked using Javascript

I'm trying to work on a project where a 2d map can be moved around, zoomed and interacted with that is within a canvas. I have got the others to work apart from the interaction. I want to be able to detect when and what element is clicked from the svg (the svg is within a canvas).
I'm using some free svg that I found online. When I try to detect the clicking using the 'click' event I only receive the canvas. Is there an easy way to get the actual element that I clicked on from within the svg that is within the canvas?

As commented before: drawing an svg to a canvas and create clickable/interactive elements is rather complicated.
Alternative: make the svg itself zoomable
You should consider using the svg directly and add a svg pan and zoom library like svg-pan-zoom
Admittedly, you most certainly have to tweak all event listeners to get the desired behavior.
const map = document.querySelector("#svgMap");
const states = map.querySelectorAll(".land");
// Expose to window namespase for testing purposes
window.zoomTiger = svgPanZoom(map, {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
//preventMouseEventsDefault: true,
//onPan: onPanFn,
beforePan: beforePanFn,
//onUpdatedCTM: onUpdatedCTMFn,
onZoom: onZoomFn,
beforeZoom: beforeZoomFn
});
let isPanning = false;
function beforeZoomFn(){
console.log('beforeZoomFn')
isPanning = true;
}
function onZoomFn(){
console.log('onZoomFn')
setTimeout(e=>{
isPanning = false;
console.log('dragend after zoom')
},100)
}
function beforePanFn(){
isPanning = true;
console.log('pan')
}
map.addEventListener("mouseup", e=>{
setTimeout(e=>{
isPanning = false;
console.log('dragend')
},100)
});
states.forEach(function(state, i){
state.addEventListener('click', function(e){
if(!isPanning){
let current = e.currentTarget;
reset_colors(current);
current.classList.toggle('on');
}
})
})
function reset_colors(exclude){
const activeStates = map.querySelectorAll('.on');
activeStates.forEach(function(state, i){
if(state!==exclude){
state.classList.remove('on');
}
});
}
body {
padding: 5px 10px;
}
svg {
display: block;
height: 20em;
width:20em;
border:1px solid #ccc;
}
.land{
cursor:pointer;
fill:#ccc;
}
.land.on {
fill: red;
}
<!--
https://github.com/bumbu/svg-pan-zoom#demos
-->
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom#3.5.0/dist/svg-pan-zoom.min.js"></script>
<svg id="svgMap" viewBox="0 0 600 500" class="svg-states">
<g id="states">
<path id="AU-NT" title="Northern Territory" class="land" d="M195.29,27.56l0.63,-1.15l-1.5,-1.01l0.76,-1l1.53,0.05l-0.03,-2.3l5.08,1.63l4.76,-0.32l1.42,0.45l1.75,-1.2l1.49,0.03l0.61,1.16l-0.37,0.8l0.66,-0.86l0,-1.68l1.45,-0.52l1.85,0.36l-1.2,-0.63l-0.12,-0.51l0.08,-3.17l0.61,-0.96l-2.19,-2l-1.27,-0.43l-3.1,0.96l-1.26,-1.76l-1.14,-0.61l-1.02,0.09l1.12,-1.54l1.2,-0.55l1.15,1.13l0.82,1.94l0.76,-0.56l-0.96,-2.37l1.41,0.26l0.7,-0.37l1.77,1.48l1.83,2.68l0.59,0.13l1.61,-2.05l0.47,0.04l2.88,4.18L222,17.2l0.55,0.8l1.54,0.65l1.26,-0.15l1.46,-1.11l1.18,0.2l-0.75,1.3l1.12,0.64l1.17,-0.75l1.47,1.12l0.23,1.27l1.77,-0.26l1.59,0.32l2.77,-0.78l1.08,1.5l2.31,1.49l1.6,0.31l1.05,-2.02l2.8,-0.15l0.83,-0.67l-0.87,0.23l0.12,-1.1l1.74,-0.25l1.38,-1.1l-0.04,-0.77l0.4,0.01l0.37,0.43l-2.18,2.1l0.46,0.54l-1.29,1.62l0.72,0.99l1.61,-1.42l1.51,-0.44l-0.92,1.16l0.37,0.56l0.8,-0.37l0.19,0.33l-0.87,1.26l0.61,1.04l2.18,-0.18l0.58,-0.45l0.76,-1.93l-2.02,-0.8l2.97,-2.35l1.21,-0.22l-0.25,0.83l1.46,3.03l0.91,-0.31l-0.69,-0.71l0.88,-0.22l1.1,0.56l1.11,1.5l-2.53,2.05l-1.1,1.77l-0.25,1.34l-1.37,-0.51l0.55,3.05l-0.95,2.19l-0.1,-0.35l-0.88,0.3l-0.12,-2.14l-1.7,2.05l-1.12,-0.6l-1.84,1.03l-0.39,0.67l0.47,0.65l-0.77,1.05l-0.2,1.25l0.89,1.61l1.07,-0.68l-1.4,5.06l-2.99,3.28l-0.9,2.33l-1.8,0.92l1.13,2.63l7.99,4.81l1.17,2.34l2.7,1.29L259,63.9l2.87,0.12l3.68,2.39l4,1.39l1.32,2.1l1.54,1.31l0,0l0,109.55l0,0l-97.64,0.07l0,0L174.7,52.34l0,0l2.01,1.22l0.06,2.26l0.71,-0.88l-0.29,-2.96l2.52,1.02l2.33,3.05l0.6,-0.23l-1.15,-1.79l0.23,-2.05l1.67,0.29l1.55,-1.07l-1.94,0.61l-0.98,-0.63l-0.96,-1.54l1.27,-0.29l0.75,-0.74L181.86,49l-1.3,-0.24l-1.97,-1.52l0.13,-0.89l1.33,-2.13l2.61,-1.64l1.04,-5.31l0.77,-0.8l0.48,0.91l1.05,-0.19l2.42,-2.05l-1.61,-1.97l0.27,-2.46l0.45,-0.2l0.47,0.43l1.11,-0.58l0.29,-2.45l1.68,-0.75l1,1.14l0.96,-0.07l-0.92,-0.27l-0.31,-1.17l0.37,-1.59l-0.33,-0.25l2.07,0.27L195.29,27.56zM195.97,19.82l-5.05,-3.27l-1.4,-4.28l0.3,-0.99l1.96,2.05l1.43,0.45l2.11,-0.91l1.14,0.49l1.6,-1.01l0.78,1.55l-0.33,-1.21l0.85,-1.12l1.59,0.64l1.2,1.58l0.09,0.83l-2.77,2.91L195.97,19.82zM260.56,44.63l0.64,-0.31l-0.28,1.4l-0.57,0.22l-5.55,-0.91l0.55,-3.66l0.31,-0.53l1.81,-0.55l-0.31,-0.7l0.91,-0.76l0.47,0.03l-0.5,0.81l0.4,1.16l1.03,0.18l0.8,-1.13l0.4,0.63l-1.64,1.47l-0.64,2.51l1.76,0.49L260.56,44.63zM190.91,18.71l-1.8,-0.69l-2.51,0.64l-0.78,-0.39l0.52,-1.37l0.91,0.32l0.4,-0.39l-0.21,-2.01l0.89,-1.55l0.96,-0.2l1.6,4l1.58,0.93l-0.25,0.55L190.91,18.71zM256.16,14.5l2.94,-4.79l-0.53,2.04l-1.77,2.48L256.16,14.5zM213.74,13.27l-1.02,-3.23l0.83,-0.32l0.52,1.71L213.74,13.27zM262.14,63.06l-1.3,-1.47l0.82,-1.19l0.9,1.94L262.14,63.06zM252.88,41.08l-0.31,-1.01l-0.11,0.72l-0.62,-0.21l0.1,-0.93l0.95,-0.75l0.95,0.73L252.88,41.08zM252.68,17.08l0,-0.51l0.99,-0.79l0.82,-0.04l1.44,-1.12L254.74,16L252.68,17.08zM256.39,61l-0.06,-1.08l0.93,-0.28l-0.19,1.23L256.39,61z"/>
<path id="AU-WA" title="Western Australia" class="land" d="M14.47,180.78l0.2,-1.84l-2.43,-2.57l-2.47,-5.41l-1.15,-0.7l-0.98,-2.78l0.03,-1.61l-2.44,-3.85l-0.06,-2.35l1.61,-5.6l0.75,-1.5l1.54,-1.21l0.27,-1.01l-0.09,-2.91l0.63,-1.92l-0.12,-1.14l-1.64,-3.85l3.01,-7.33l1.05,-1.56l1.44,-0.5l0.14,0.28l-1.07,4.09l0.7,1.48l-0.34,2.16l0.47,0.48l2.37,-1l3.02,-7.02l3.17,-1.76l1.19,-0.09l4.33,-1.9l1.82,-2.15l2.03,-1.1l1.29,-1.94l2.55,-1.19l0.97,-1.12l2.46,-0.73l2.52,-1.81l1.83,0.79l2.07,-1.11l2.99,1.26l3.72,-0.63l1.79,-0.78l3.56,-2.99l0.61,0.29l6.15,-1.02l1.94,-2.81l1.09,-0.83l1.18,-0.11l4.27,1.28l2.21,-1.14l5.99,-1.07l7.49,-3.28l2.71,-2.26l2.3,-3.11l1.64,-3.53l1.5,-2.02l0.25,-1.78l1.51,-0.37l4.32,-3.6l0.26,-1.43l-1.18,-0.54L101,86.33l-0.12,-2.14l-0.64,-1.66l0.37,-3.56l2.22,-2.79l0.74,-0.47l1.38,-0.01l-0.55,-1.23l0.46,-0.62l2.02,-0.31l0.09,-1.82l1.45,-1.11l0.28,-0.99l0.77,-0.28l0.74,0.74l-0.77,0.23l-0.36,1.25l1.52,1.46l5.2,9.95l-0.13,-2.6l0.6,-1.82l-0.49,-1.5l0.2,-0.86l0.69,-0.02l2.17,2.39l0.65,0.02l-0.91,-0.81l-0.39,-1.56l1.03,-1.18l-1.36,-0.06l-1.72,-2.42l0.06,-1.23l-1.22,0.02l-0.83,-0.75l2.34,0.34l0.74,-1.12l-0.02,-1.01l-1.6,-0.58l0.12,-1.31l1.69,-0.37l0.87,0.68l-0.8,0.68l1.72,1.34l0.79,-1.5l1.91,0.45l0.98,1.34l1.12,0.06l0.56,-0.64l0.99,0.48l4.53,0.12l-3.02,-0.89l-2.33,0.02l-0.27,-1.21l0.59,-1.34l0.44,-0.1l0.52,0.79l0.81,-0.56l0.24,-2.2l1.22,-1.23l-1.2,-0.07l-0.88,1.5l-1.46,-0.81l-0.31,-2.2l0.93,-2.13l1.35,0.43l0.81,-0.42l0.08,-2.42l0.46,-0.11l5.17,2.99l-1.14,-1.01l0.23,-1.44l-2.01,0.38l0.28,-1.2l0.73,0l0.43,-0.74l-1.76,0.85l-0.62,-0.86l0.82,-0.67l0.87,0.12l1.06,-1.24l0.94,1.82l-0.03,-1.44l1.74,1.36l1.23,-0.26l-2.73,-2.06l0.65,-0.52l-1.16,-1.72l2.17,-2.5l2.74,0.29l-0.1,-2.68l0.42,-0.96l1.2,0.57l-0.94,3.98l0.87,-2.52l1.31,0.67l-0.2,1.2l0.84,0.79l1.46,-1.43l1.18,-4.29l-0.71,-1.82l-0.69,-0.44l2.17,0.39l-0.09,0.84l-0.56,0.24l0.37,1.22l1.04,0.72l0.5,-2.03l1.83,-0.95l-0.51,1.25l1.58,1.69l2.05,-2.87l-0.47,-1.96l1.22,-0.49l1.06,-0.25l0.67,0.54l1.2,2.17l0.28,-0.79l2.94,0.6l1.04,1.47l1.49,1l3.25,4.52l0.47,-0.23l1.84,1.58l0.2,1.09l-1.29,3.36l0.04,3.31l-0.57,1.14l0.83,-0.72l0.38,-2.46l1.36,1.03l0.32,1.06l0.05,-1.08l-1.08,-2.67l1.24,-1.7l0.51,1.47l1.03,0.03l-0.66,-2.76l1.61,-0.46l5.04,1.26l0,0l0.06,128.49l0,0L174.7,251l0,0l-8.88,4.31l-9.21,3l-7.03,0.63l-5.51,-0.99l-1.2,0.59l-1.05,-0.23l-4.96,3.58l-2.31,0.67l-6.03,3.84l-5.04,1.13l-1.91,1.98l-1.63,5.43l-2.02,1.76l-0.38,1.1l-2.11,1.64l-1.87,-0.14l-2.18,1.61l-0.73,-1.72l-0.9,-0.38l-1.88,0.64l-5.33,0.08l-1,0.69l-0.12,0.66l-1.44,0.15l-0.42,-0.14l-0.09,-1.62l-0.84,-0.89l-2.31,0.97l-3.47,-1.07l-6.5,0.51l-3.5,0.79l-1.34,0.74l-4.47,-0.59l-2.08,0.64l-2.14,1.59l-1.61,3.03l-1.54,1.51l-1.27,0.75l-3.22,-0.67l-1.87,1.27l0.16,0.75l-0.38,0.43l-2.63,1.1l-2.12,2.39l-2.17,1.16l-2.65,0.48l0.21,0.55l1.5,0.33l-0.67,0.38l-2.25,-1.02l-1.02,0.28l-0.25,0.91l-3.01,-1.58L43.87,294l-0.82,0.54l-4.48,-0.75l-2.64,-1.76l-2.64,-0.61l-1.73,-2.78l-3.46,-2.94l-2.76,-1.12l-1.29,0.85l-1.23,-1.31l-0.6,-7.43l0.47,-2.18l2.43,1.68l1.92,-0.41l3.43,-4.63l-1.28,-7.64l1.09,-1.9l-0.68,1.62l0.94,1.56l0.47,-2.54l-0.61,-10.92l-7.15,-15.29l-0.26,-2.89l-0.94,-2.67l0.44,-7.12l-0.98,-3.49l-0.57,-1.35l-2.34,-2.78l-0.38,-2.93l-0.88,-1.78l-3.78,-4.87l-0.65,-2.93l0.5,-1.76l-0.21,-1.27l-2,-4.92l-3.81,-6.15l-3.31,-3.52l-0.61,-1.93l0.69,-2.54l0.5,3.02l0.34,-1.92l1.61,1.99l0.35,2.7l1.05,1.77l1.53,-0.61l0.78,-1.16l0.06,-2.06l-3.37,-3.15l-0.63,-2.6l-1.1,-1.78l0.85,-2.03l2.47,3.05l0.4,1.13l-0.57,1.75l0.35,1.95l0.92,-0.34l0.87,-1.68l0.87,3.6l1.2,1.61l1.36,-1.07l0.29,-0.97l-0.54,-1.32l0.37,-2.33L14.47,180.78zM3.24,182.51l-2.75,-4.33L0,176.3l0.51,-1.67l0.54,0.13l-0.17,0.86l2.39,5.66L3.24,182.51zM126.09,58.75l-0.58,-1.35l0.98,-0.72l0.94,1.57L126.09,58.75zM26.72,120.51L26,120.37l0.01,-0.61l1.47,-1.72l0.23,1.22L26.72,120.51zM132.78,49.85l-0.57,-0.31l0.07,-0.85l0.76,-1.17l0.5,0.56L132.78,49.85z"/>
<path id="AU-ACT" title="Australian Capital Territory" class="land" d="M392.28,306.01L391.02,305.37L391.02,305.37L389.29,302.43L389.31,300.59L389.83,298.03L392.68,295.93L396.19,298.12L393.88,298.81L393.36,299.53L392.74,302.02L392.9,305.16L392.9,305.16z"/>
<path id="AU-NSW" title="New South Wales" class="land" d="M402.43,327.48l-19.25,-9.7l-0.98,-0.08l0.99,-2.48l-1.68,-2.93l-0.56,-4.42l-1.18,-0.75l-1.82,-0.78l-0.93,0.36l-1.53,-0.29l-1.01,0.17l-1.01,1.26l-2.8,0.73l-1.46,-0.1l-4.52,-1.69l-2.2,0.99l-5.35,-0.78l-3.1,-2.19l-1.77,0.7l-1.31,-0.39l-2.7,0.35l-0.58,1.62l0.17,1.36l-2.34,0.43l-1.34,-0.78l-2.28,-2.67l-0.56,-1.28l-2.81,-2.59l-3.52,-2.26l-1.89,-0.68l-0.35,-1.69l-1.69,-0.72l-0.5,-1.1l-0.16,-4.01l-2.31,-1.26l-2.89,-0.62l-0.82,-0.81l-0.81,0.48l-0.84,2.17l-0.92,-0.18l-0.93,-2.25l-0.94,-0.87l-0.05,-1.88l-1.51,-2.54l-2.12,-1.16l-1.7,0.35l-1.61,-0.42l-2.1,1.48l-3.19,-1.83l-1.87,-0.14l-0.84,-0.6l0,0l0.05,-63.7l0,0l86.31,0l5.57,-4.95l1.2,-0.33l1.4,0.69l6.37,-1.08l1.88,1.44l3.45,-0.29l2.74,1.25l2.77,2.39l0.13,1.88l0.68,1.09l1.06,-0.68l0.98,-2l1.87,-0.83l1.07,1.1l2.08,-1l0.35,-2.01l-0.98,-2.22l2.27,-1.44l2.16,-0.71l1.28,-1.38l1.19,0.8l1.78,0.39l3.82,-0.09l0.83,-1.1l2.64,-0.73l0.81,-0.66l0,0l0.78,0.71l0.15,0.81l-0.35,2.67l0.7,2.08l-0.2,2.48l-1.71,2.24l-1.2,3.52l0.3,0.87l-1.21,6.89l-2.55,7.71l-0.14,3.35l0.75,1.43l-2.46,8.95l-3.66,6.04l0.19,3.48l-4.37,3.57l0.19,1.13l-3.61,1.52l-2.58,4.88l-1.3,0.64l-0.11,0.59l0.46,0.41l-0.35,1.39l-1.24,1.66l-0.73,4.43l-1.88,0.58l1.04,0.56l-2.83,3.59l-1.02,2.97l0.44,0.54l-0.54,2.46l-0.92,1.21l1.14,1.9l-0.17,0.88l-0.29,0.25l-0.36,-0.39l-0.02,-0.88l-0.98,0.4l0.2,1.12l-1.77,1.32l-4.1,9.49l-0.29,5.19l-0.63,0.82l-1.9,7.2l0.05,1.97l1.08,1.25l0.14,0.94l-0.01,0.45l-0.77,0.24L402.43,327.48zM392.74,302.02l0.62,-2.48l0.52,-0.73l2.31,-0.68l-3.5,-2.19l-2.85,2.1l-0.52,2.56l-0.02,1.85l1.73,2.94l0,0l1.35,0.59l0.53,-0.8L392.74,302.02z"/>
<path id="AU-SA" title="South Australia" class="land" d="M254.01,283.28l-1.08,1.74l-0.88,0.39l-0.93,1.59l-1.12,0.7l-0.67,1.33l-0.77,2.33l0.75,0.06l1.45,-1.02l0.15,0.69l-0.17,2.59l-0.52,0.22l-1.84,-1.95l-0.68,0.1l-0.48,1.13l-0.39,-0.01l-3.44,-4.32l-1.2,-0.78l-1.12,0.39l1.04,-2.08l0.05,0.82l1.42,1.52l0.57,0.39l1.08,-0.35l-1.23,-0.85l-1.31,-7.14l-2.47,-3.1l-2.09,-1.7l0.19,-2.15l-1.63,-3.81l-1.24,-0.48l-2.87,0.81l-0.66,-0.74l-2.11,-5.47l0.87,0.06l0.58,1.05l0.96,-1.67l-0.22,-1.14l-1.76,-1.73l-2.84,1.13l0.33,-1.76l0.73,-0.08l-1.35,-1.88l-1.78,-1.26l0.12,-0.47l-0.74,-0.23l-1.31,1.43l-3.46,-0.24l-4.14,-2.99l-2.18,-0.26l-2.79,1.3l-1.43,-0.14l-4.63,-3.88l-6.74,-3.15l-3.85,1.73l-7,-0.39L174.7,251l0,0l0.06,-70.18l0,0l97.64,-0.07l0,0l32.57,0L305,217.3l0,0l-0.05,63.7l0,0l-0.28,-0.37l-0.04,54.4l0,0l-2.93,0.11l-1.83,-0.98l-1.89,-1.9l-2.55,-4.52l-1.38,-0.52l-2.63,-3.98l0.34,-0.7l-0.54,-1.81l0.2,-1.25l1.19,-1.71l-0.42,-3.24l-1.9,-4.63l-3,-4l-3.14,-3.08l3.49,2.76l2.78,4.4l-1.02,-2.95l-5.07,-5.1l-0.02,-1.18l0.67,-0.27l0.82,0.71l0.07,1.9l1.02,-0.11l0.23,-4.21l-1.56,-0.77l-0.84,0.83l-1.79,0.39l-0.11,0.89l0.83,0.46l-0.49,0.63l-2.93,-0.25l-2.01,1.52l-3.92,0.21l-0.89,-0.67l0.65,-1.15l1.44,-0.72l1.66,-1.79l0.28,-3.05l0.53,-1.16l-0.2,-3.9l-2.4,-3.27l-0.6,-2.16l-1.38,-2.35l-0.93,1.6l0.13,1.14l-1.03,1.06l-0.38,1.31l-0.15,2.44l-1.38,5.56l-0.8,0.65l-2.75,-0.81l-2.04,0.77l-0.72,0.93l-1.51,-0.23l-1.47,0.97l-0.66,-0.69l1.14,-1.38l0.95,-3.24l0.91,0.36l1.89,-0.3l1.12,0.72l0.54,-0.29l0.7,-3.69l-0.06,-4.88l-0.45,-1.65l1,-0.85l0.64,-2.76l3.75,-4.22l-1.46,-3.64l0.33,-0.98l2.19,-0.94l-0.08,-0.66l-0.93,-0.89l-1.5,-5.68l-0.58,-0.44l-0.09,2.09l0.5,0.58l0.07,1.37l-0.36,1.86l-1.95,0.48l-1.16,1.26l-3.02,6.97l-0.74,0.62l-1.32,0.05l-0.77,-0.47l-0.93,1.64l-4.89,3.05L254.01,283.28zM271.44,303.46l1.65,0.45l0.54,1.42l-0.79,0.71l-1.29,-0.63l-1.74,-0.13l-1.53,0.72l-0.06,1.2l-1.73,1.01l-1.06,-1.08l-1.43,-0.27l-0.82,0.8l-4.75,0.17l-1.89,-1.86l0.46,-1.97l5.85,-1.43l2.14,-0.95l2.27,0.19l0.64,0.61l0.14,1.28l2.1,0.75l0.64,0.05L271.44,303.46z"/>
<path id="AU-VIC" title="Victoria" class="land" d="M398.1,330.52l-2.92,0.82l-10.86,0.36l-5.97,2.2l-4.2,3.51l-5.42,5.71l-4.8,0.91l-2.3,-0.02l-0.38,0.57l1.21,2.21l1.25,-0.88l0.23,-0.84l0.39,0.18l0.16,3.76l-0.97,0.99l-0.81,-0.69l-0.79,-2.07l-1.14,-1.43l-0.84,-0.36l-0.68,0.6l-1.07,-0.09l-0.96,-2.84l-0.96,-0.15l-1.31,0.58l-2.08,-1.91l0.18,-1.29l1.34,-1.08l-1.21,-2.03l-2.05,0.15l-0.46,1.54l-1.98,2.04l-1.4,0.12l-1.52,-1.77l2.43,-0.51l1.59,-2.8l-0.35,-1.29l-1.97,-2.39l-4.24,3.19l-1.72,0.35l0.06,0.5l1.5,0.26l1.35,-0.65l0.75,0.21l0.05,1.01l-0.56,0.86l-3.21,0.54l-3.27,2.21l-2.38,2.93l-1.2,0.33l-2.05,1.93l-5.37,-3.08l-2.66,-0.85l-2.91,-2.25l-1.69,-0.67l-2.38,0.5l-2.12,-1.49l-2.32,-0.34l-1.42,0.75l0.33,1.08l-0.86,0.24l-1.27,-0.62l-2.83,-2.92l-2.44,-1.32l0,0l0.04,-54.4l0.28,0.37l0,0l0.84,0.6l1.87,0.14l3.19,1.83l2.1,-1.48l1.61,0.42l1.7,-0.35l2.12,1.16l1.51,2.54l0.05,1.88l0.94,0.87l0.93,2.25l0.92,0.18l0.84,-2.17l0.81,-0.48l0.82,0.81l2.89,0.62l2.31,1.26l0.16,4.01l0.5,1.1l1.69,0.72l0.35,1.69l1.89,0.68l3.52,2.26l2.81,2.59l0.56,1.28l2.28,2.67l1.34,0.78l2.34,-0.43l-0.17,-1.36l0.58,-1.62l2.7,-0.35l1.31,0.39l1.77,-0.7l3.1,2.19l5.35,0.78l2.2,-0.99l4.52,1.69l1.46,0.1l2.8,-0.73l1.01,-1.26l1.01,-0.17l1.53,0.29l0.93,-0.36l1.82,0.78l1.18,0.75l0.56,4.42l1.68,2.93l-0.99,2.48l0.98,0.08l19.25,9.7l0,0l-2.09,0.65l-1.22,1.86L398.1,330.52zM352.26,340.07l-0.78,-0.3l0.13,-1.52l1.74,0.36l0.44,0.52L352.26,340.07zM352.24,341.99l-0.9,-0.68l-1.64,0l0.76,-0.74l1.01,-0.2L352.24,341.99z"/>
<path id="AU-QLD" title="Queensland" class="land" d="M402.43,140.14l0.66,0.82l-1.28,-3.39l0.85,-2.22l0.86,0.03l1.32,2.67l4.26,2.27l-0.64,-2.37l0.3,-0.61l0.79,0.14l0.77,1.15l-0.24,1.31l1.47,2.09l-0.69,4.67l0.61,1.26l-0.13,1.68l0.72,1.46l1.69,0.61l1.57,2.78l1.13,0.41l1.66,1.78l1.33,0.68l-0.09,0.6l0.83,-0.4l0.28,-0.89l0.48,0.14l2.71,2.71l2.15,4.63l3.65,2.42l0.43,2.21l1.78,2.95l2.57,0.52l0.42,1.76l-0.58,1.51l0.29,2.07l0.69,0.44l0.58,1.42l1.6,0.99l-1.23,4.03l0.92,9.36l-1.33,1.14l0.33,1.66l2.08,2.02l0.68,2.33l0.92,1.29l0.32,0.87l-0.24,1.63l1.04,2.06l0,0l-0.81,0.66l-2.64,0.73l-0.83,1.1l-3.82,0.09l-1.78,-0.39l-1.19,-0.8l-1.28,1.38l-2.16,0.71l-2.27,1.44l0.98,2.22l-0.35,2.01l-2.08,1l-1.07,-1.1l-1.87,0.83l-0.98,2l-1.06,0.68l-0.68,-1.09l-0.13,-1.88l-2.77,-2.39l-2.74,-1.25l-3.45,0.29l-1.88,-1.44l-6.37,1.08l-1.4,-0.69l-1.2,0.33l-5.57,4.95l-86.31,0l0,0l-0.02,-36.54l-32.57,0l0,0l0,-109.55l0,0l3.15,2.11l3.79,0.42l2.21,1.09l1.82,0.26l1.42,1.97l0.23,1.46l1.06,1.58l1.92,0.41l1.95,1.6l2.15,0.62l2.22,1.56l4.1,-0.45l4.74,-2.51l1.34,-5.09l2.58,-3.35l1,-2.26l1.52,-4.82l-0.28,-1.89l0.65,-4.14l2.23,-5.7l-1.07,-2.94l-0.49,-3.15l0.86,-3.76l-1.33,-2.17l-0.09,-1.34l0.79,-3.28l1.59,-3.09l-1.03,-3.28l1.67,-1.47l0.53,-1.47l0.65,0.2l0.82,2.19l0.09,-0.47l-0.61,-1.78l-1.8,-2.33l0.32,-0.26l-0.93,-0.21l0.25,1.11l-0.63,0.2l-0.36,-0.42l1.97,-3.51l0.8,-2.48l0.47,-0.21l0.27,1.32l1.16,-0.23l-0.84,-1.58l1.91,-6.08l0.27,-4.66l2.12,-0.59l1.1,-2.04l1.83,0.45l-1.05,1.18l-0.08,1.01l1.08,-0.85l1.47,1.25l0.47,1.03l0.84,3.42l-0.07,4.87l1.18,1.04l1.46,-0.26l1.04,0.93l-1.05,1.69l-0.27,2.14l2.15,0.87l0.04,1.16l1.64,1.1l-0.73,2.57l1.65,0.33l0.08,4.71l0.79,1.42l-0.69,3.6l0.77,2l0.92,0.97l1.05,4.34l1.14,0.82l1.35,0.01l4.59,-2.6l0.45,-1.01l0.43,0.1l0.68,1.02l0.39,2.47l0.68,0.81l2.39,0.68l0.68,1.51l3.87,2.14l-0.88,2.11l0.6,2.2l-0.44,1.29l1.21,3.23l0,2.03l1.12,1.88l-0.65,4.02l4.39,5.32l1.36,-0.47l0.26,0.32l-0.79,1.95l1.62,3.31l0.79,3.7l-0.11,2.99l-1,2.12l0.08,1.09l2.2,2.88l1.32,0.5l-0.61,4l3.12,2.93l2.15,0.49l1.33,1.33l2.02,0.45l0.73,0.69l3.18,0.11l-0.33,-1.19l1.67,2.6l0.43,2.2l0.81,1.12l1.09,0.02l-0.09,-1.33l0.66,0.01l0.98,2.1l3.34,0.61l0.86,1.04l-0.26,0.44l1.51,1.49l0.57,-0.25l-0.15,-1.39l2.39,1.75l1.04,0.19l1.8,3.48l-1.56,-0.9l-0.53,0.22l-0.8,0.99l0.67,1.8l5.27,4.19l0.27,2.3l2.2,3.52l-0.14,2.21l0.99,3.54l1.91,3.19l-0.29,1.69l1.58,-1.3L402.43,140.14zM436.13,178.32l-0.91,-0.7l-0.59,-2.15l1.32,-2.63l-0.16,-1.29l2.07,-2.83l-0.03,-0.94l-0.86,-1.18l1.33,-1.38l0.09,2.44l0.88,1.31l-2.65,6.24L436.13,178.32zM284.87,73.53l0.18,-1.81l1.54,-1.55l2.47,-0.55l2.09,0.34l0.06,0.66l-0.47,0.22l-1.18,-0.23l-1,0.4l-0.51,1.46L284.87,73.53zM416,154.42l-1.75,-2.14l-0.52,-1.75l0.48,-0.11l1.73,1.31l0.83,2.26L416,154.42zM362.4,93.15l-0.75,-0.29l-0.21,-1.04l-1.25,-1.39l1.99,0.61l0.9,1.3L362.4,93.15zM439.66,201.72l0.29,-3.84l1.17,0.02l-0.94,3.76L439.66,201.72zM439.86,197.24l-0.72,-2.02l0,-1.64l0.93,-0.51L439.86,197.24zM317.82,6.96l-0.68,-0.55l-0.05,-0.69l1.1,-0.52l0.46,1.21L317.82,6.96zM318.87,1.42l-0.98,-0.67l0.42,-0.64l0.6,-0.11l0.61,0.61L318.87,1.42zM287.91,77.87l-0.31,-0.65l1.11,-1.04l0.56,0.4l0.18,0.83l-1.28,-0.03L287.91,77.87z"/>
<path id="AU-TAS" title="Tasmania" class="land" d="M369.2,414.49l-0.9,0.45l-0.2,-0.45l-1.4,-0.22l-0.94,-0.71l-3.29,-0.32l-0.7,-0.68l-1.31,0.4l-0.78,-0.26l-1.15,-1.81l0.64,-0.45l2.61,0.67l0.02,-0.98l-0.77,-0.64l-0.42,0.76l-3.12,-0.54l-2.62,-4.71l-0.91,-0.2l-0.56,-0.9l-1.15,-3.62l-1.02,-0.68l-0.59,-5.21l0.2,-0.26l2.2,1.98l0.47,2.18l0.9,-2.52l-1.02,-0.36l-1.93,-2.12l-0.35,-2.13l-3.18,-4.67l-2.92,-7.17l-0.73,-4.09l0.88,-0.8l0.02,-1.66l0.66,-0.44l2.43,0.29l1.42,1.05l1.72,-0.28l9.97,5.07l3.32,-0.1l0.94,0.53l-0.05,-0.5l1.62,-1.17l0.57,0.18l0.24,0.95l1.48,0.27l-1.3,-0.84l-0.05,-0.69l2.15,-1.2l1.41,0.47l2.27,-0.46l0.66,0.59l0.78,-0.47l1.34,-2.04l0.69,-0.17l1.77,0.86l0.69,-0.4l0.76,-1.69l1.17,0.34l2.1,1.89l0.6,1.35l-0.69,2.46l0.57,2.41l-0.47,1.72l0.44,2.29l-0.54,2.92l1.08,5.94l-0.57,0.81l-0.39,-0.33l0.37,-1.68l-1.24,-2.84l-1.26,2.5l-0.82,5.93l-0.65,1.34l0.12,1.52l-0.78,0.81l-0.44,1.48l0.62,0.2l0.12,-0.68l0.96,0.98l-0.52,2.59l0.48,2.15l-1.04,-0.66l-1.19,0.94l-1.72,-2.69l-0.14,-0.71l0.95,-1.17l0.82,1.67l1.28,-0.36l-0.8,-1.4l-2.91,-1.5l-0.6,0.45l0.55,1.75l-0.29,0.58l-1.07,0.35l-0.21,-2.25l-0.98,-0.63l0.34,0.86l-1.16,3.39l0.06,2.01l-0.75,0.19l-0.87,-0.56l-0.94,-1.87l-0.46,0.27l-0.01,1l1.37,1.25L369.2,414.49zM382.36,365.85l-0.98,-0.54l-0.22,-1.36l-1.24,-2.33l-1.55,-1.38l1.32,-1.74l0.93,-0.4l2.15,2.87l1.33,0.92l0.47,3.17L382.36,365.85zM336.69,363.9l-0.38,-0.28l0.06,-1.87l-0.62,-0.81l0.03,-0.77l0.19,-2.27l0.85,-0.63l0.02,-1.18l0.46,-0.13l1.42,1.24l0.41,3.76l-0.44,1.51L336.69,363.9zM384.64,369.1l-0.23,-0.97l-2.52,0.32l-0.97,-0.42l0.02,-0.55l0.72,-0.59l1.49,0.19l1.52,-0.77l1.48,1.76L384.64,369.1zM373.39,412.93l-1.38,-0.17l-0.57,-1.19l1.92,-2.37l0.7,1.83L373.39,412.93zM499.07,600l-0.48,-0.05l-0.01,-1.54l0.62,-2.78l0.75,-0.81L499.07,600zM374.03,409.2l-0.75,-1.57l0.7,-1.22l0.82,2.48L374.03,409.2zM381.12,401.66l0.05,-1.96l1.19,-0.43l0.44,1.11l-0.76,0.01L381.12,401.66zM347.19,372.32l-0.25,-0.83l0.65,-0.77l0.98,1.12L347.19,372.32z"/>
</g>
</svg>

SVG access to path when instantiated with a use (shadowDOM) (vanilla javascript)

I'd like to manipulate the internal path of a SVG which is in a separate file and instantiated with a "use"
here is my code
<!DOCTYPE html><meta charset="utf8"/>
<script src="https://ipfs.blockringtm.ml/ipfs/QmZU12UqysToVJjNmWo3E31i4tmmMbWyxZ82Vyse9CQp49/path-data-polyfill.js"></script>
<svg data="logo.svg" type="image/svg+xml" id="logo"
width="120px"
preserveAspectRatio="xMidYMin slice" viewBox="0 0 512 512"
>
<!-- https://stackoverflow.com/questions/65526455/trying-to-access-svg-elements-generated-with-use-with-javascript -->
<!--
SVG use elements are like shadow DOM elements in HTML. Only the attributes
of the USE element itself is exposed via the SVG DOM - you cannot alter
any properties on a single USE element instance that are being cloned
from the original symbol. It's not like a macro.
-->
<use id="logo1" xlink:href="logo.svg#logo"></use>
</svg>
<script>
var svg = document.querySelector('#logo');
var use = svg.querySelector('#logo1');
console.log('use:',use);
var paths = use.querySelectorAll('path'); // FAILED HERE : empty NodeList: []
console.log('paths:',paths);
for (let path of paths) {
var pathdata = path.getPathData();
console.log(pathdata);
}
</script>
The svg file is :
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196.1 236.8">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#606"/>
<stop offset="1"/>
</linearGradient>
</defs>
<path id="pin" fill="#01a49b" d="M30.3 168a94.8 94.8 0 0063.2 27.2 95 95 0 0065.6-21.8c.8-.8 17.6-16 1.2.6l-28 28.2L98 236.8l-68.1-68c-6.5-6.5-12.6-15.5-12.6-15.5a88.1 88.1 0 0013 14.7z"/>
<path if="wrench" fill="#660266" d="M13.5 47.8C36.2 8.5 97-15.8 145 11.9c41.1 23.7 69.1 81.4 37.6 135-17.6 30-49.3 44-65 46.7-4 .7-18.3 1.9-22.5 1.9-1.3-.1-1.8-1.2-1-2.6l17.5-30.8c14.7-4.5 32-11.3 44.2-32.4a66.7 66.7 0 00-26.5-90.8C93.8 18.7 55 37.9 40 63.7A64.5 64.5 0 0051 144l8.2-14.5c2.2-3.8 2.4-4.5-.2-9A46.6 46.6 0 0158 73.3a44.8 44.8 0 0134.5-21.7c5.4-.3 4.8 1 3.7 2.7L80 82.3l9.4 16.3c1.7 3 5 6 8.5 5.9l22-2 15.3-26c1.3-1.9 2.2 0 3 2.2.7 2.2 10.4 16.9-2.5 39.3a45.3 45.3 0 01-37.9 23.4c-4.8-.3-6.1 2.5-8.7 7L65 190A99.7 99.7 0 012.7 121c-6.4-25.7-.8-53.3 10.8-73.3z"/>
</svg>
if I use an <object> tag instead of the <use> I can access the internal path with a path.pathSegList
however it doesn't work with path.getPathData pollyfill as the path is a plain object and not a SVGPathElement.
Questions :
how to I get a SVGPathElement from a path within an Object tag ?
i.e. how to I cast a DOMobject into a SVGPathElement ?
alternatively is there a way to I get and "open" shadow-root with the use tag, do I need to create the tag within the script to keep it open ?
The code (that works) with the object tag instance is :
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf8">
<script src="http://ipfs.blockringtm.ml/ipfs/QmU3jKAewrHV8Wryx2WzT5v72PsgT7wt8FgnL8mqmWk259/path-data-polyfill.js"></script>
<style>
body { border:0; margin:0; padding: 0; height: 100vh; top: 0; }
svg { border: 1px dashed #555 }
</style>
<object id="sotest1" style="width:100px" data="logo.svg" type="image/svg+xml"></object>
<script>
let obj = document.querySelector('#sotest1');
obj.addEventListener("load",function(){
console.log('obj.loaded !');
var svgDoc = obj.contentDocument;
console.log('svgDoc:',svgDoc);
let path1 = svgDoc.querySelector("#pin");
console.log('typeof:',typeof(path1))
console.log('#path.d:',path1.getAttribute('d'));
let paths = svgDoc.getElementsByTagName('path');
for (let p of paths) {
let d = p.getAttribute('d'); // does work but can get p.getPathData() to work
console.log('p.d:',d);
}
},false);
</script>
if you want to get the file I have prepared a gist for it :
https://gist.github.com/DrI-T/145db3eed5905f83333d8127cbf2c6b8

Is there a way to show a blank square space filled with content on a leaflet map when clicking on a custom button?

To give a little bit of context, i am currently into developping an interactive map from scratch!
I work on leaflet, with HTML/CSS/Javascript.
I have one thing that i don't know how to do. I have add one custom button over my map, a designed one with some effects on hover. I would like to add interactivity on this button.
I would like, when a people click on this button, a blank square filled with content (small image+ text) will appear over my map.
I have try many ways to reach this, with a pop-up, but the render is really not good, because the pop-up is linked to a certain Long/Lat on the map and i just want a blank square over the map.
I probably know that the best way to reach this is to firstly add a Onclick event on my button.
<div class="wrapper" id='testId'>
<a class="cta" href="#">
<span>Regions</span>
<span>
<svg width="66px" height="43px" viewBox="0 0 66 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path class="one" d="M40.1543933,3.89485454 L43.9763149,0.139296592 C44.1708311,-0.0518420739 44.4826329,-0.0518571125 44.6771675,0.139262789 L65.6916134,20.7848311 C66.0855801,21.1718824 66.0911863,21.8050225 65.704135,22.1989893 C65.7000188,22.2031791 65.6958657,22.2073326 65.6916762,22.2114492 L44.677098,42.8607841 C44.4825957,43.0519059 44.1708242,43.0519358 43.9762853,42.8608513 L40.1545186,39.1069479 C39.9575152,38.9134427 39.9546793,38.5968729 40.1481845,38.3998695 C40.1502893,38.3977268 40.1524132,38.395603 40.1545562,38.3934985 L56.9937789,21.8567812 C57.1908028,21.6632968 57.193672,21.3467273 57.0001876,21.1497035 C56.9980647,21.1475418 56.9959223,21.1453995 56.9937605,21.1432767 L40.1545208,4.60825197 C39.9574869,4.41477773 39.9546013,4.09820839 40.1480756,3.90117456 C40.1501626,3.89904911 40.1522686,3.89694235 40.1543933,3.89485454 Z" fill="#FFFFFF"></path>
<path class="two" d="M20.1543933,3.89485454 L23.9763149,0.139296592 C24.1708311,-0.0518420739 24.4826329,-0.0518571125 24.6771675,0.139262789 L45.6916134,20.7848311 C46.0855801,21.1718824 46.0911863,21.8050225 45.704135,22.1989893 C45.7000188,22.2031791 45.6958657,22.2073326 45.6916762,22.2114492 L24.677098,42.8607841 C24.4825957,43.0519059 24.1708242,43.0519358 23.9762853,42.8608513 L20.1545186,39.1069479 C19.9575152,38.9134427 19.9546793,38.5968729 20.1481845,38.3998695 C20.1502893,38.3977268 20.1524132,38.395603 20.1545562,38.3934985 L36.9937789,21.8567812 C37.1908028,21.6632968 37.193672,21.3467273 37.0001876,21.1497035 C36.9980647,21.1475418 36.9959223,21.1453995 36.9937605,21.1432767 L20.1545208,4.60825197 C19.9574869,4.41477773 19.9546013,4.09820839 20.1480756,3.90117456 C20.1501626,3.89904911 20.1522686,3.89694235 20.1543933,3.89485454 Z" fill="#FFFFFF"></path>
<path class="three" d="M0.154393339,3.89485454 L3.97631488,0.139296592 C4.17083111,-0.0518420739 4.48263286,-0.0518571125 4.67716753,0.139262789 L25.6916134,20.7848311 C26.0855801,21.1718824 26.0911863,21.8050225 25.704135,22.1989893 C25.7000188,22.2031791 25.6958657,22.2073326 25.6916762,22.2114492 L4.67709797,42.8607841 C4.48259567,43.0519059 4.17082418,43.0519358 3.97628526,42.8608513 L0.154518591,39.1069479 C-0.0424848215,38.9134427 -0.0453206733,38.5968729 0.148184538,38.3998695 C0.150289256,38.3977268 0.152413239,38.395603 0.154556228,38.3934985 L16.9937789,21.8567812 C17.1908028,21.6632968 17.193672,21.3467273 17.0001876,21.1497035 C16.9980647,21.1475418 16.9959223,21.1453995 16.9937605,21.1432767 L0.15452076,4.60825197 C-0.0425130651,4.41477773 -0.0453986756,4.09820839 0.148075568,3.90117456 C0.150162624,3.89904911 0.152268631,3.89694235 0.154393339,3.89485454 Z" fill="#FFFFFF"></path>
</g>
</svg>
</span>
</a>
</div>
var button = document.getElementById('testId')
L.DomEvent.on(button,'click',function(e){
console.log('Button clicked')
});
This is my button.
Under you can find the div that i want to make appear on a click
</div>
<div class="inforegion">
</div>
Then, i want when someone click on this button, to show this
.inforegion {
position: fixed;
top: 50px;
width: 500px;
height: 200px;
padding: 100% 0 0 0 !important;
background: #ffffff;
z-index: 10000,
display: none;
}
It will be my blank space where i will put informations in it after.
My question is How make this div appear only on the click of the button?
Thank you very much

svg cannot show tooltip normally in IE but normal Chrome

I cannot show the tooltip normally in IE but normally in Chrome.
Used some js codes to create dynamical label called title.
Add it into the svg.
Everything is right in Chrome with tooltip, but not in IE.
<svg id="lang-picker-toggler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
<path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
</svg>
Here is my javascript:
// Create dynamically label for tooltip
var titleEle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
var textString = document.createTextNode(currentLangElement.getAttribute('data-language'));
titleEle.appendChild(textString);
langPickerTogglerElement.appendChild(titleEle);

IE will not show any tooltip for the <title> element of the root <svg> element.
svg {border: 1px solid}
<svg>
<title>IE won't show this as a tooltip</title>
<rect x="50" y="50" width="50" height="50">
<title>However this will be in a tooltip even in IE</title>
</rect>
</svg>
fiddle for IE
Specs explicitly allow such behavior:
For reasons of accessibility, user agents should always make the content of the ‘title’ child element to the root svg element available to users. However, this is typically done through other means than the tooltips used for nested SVG and graphics elements, e.g., by displaying in a browser tab.
If you wish the tooltip to appear in this browser you must set the <title> of an inner element.
In your case, it could have been a <g> that would contain both <path> elements, if it wasn't for an other IE oddity where they show the tooltip only when you hover over painted areas (strokes and fills).
So given your paths don't cover the whole svg element, it's kinda risky to hope for your users will hover at the correct place.
So this leaves us with a last solution, which is to append a <rect> which will act as an invisible background covering the whole viewPort and will handle the <title>.
// We are now targetting the <rect> element
var langPickerTogglerElement = document.querySelector('#lang-picker-toggler > rect');
var currentLangElement = document.querySelector('[data-language]');
var titleEle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
var textString = document.createTextNode(currentLangElement.getAttribute('data-language'));
titleEle.appendChild(textString);
langPickerTogglerElement.appendChild(titleEle);
svg {border: 1px solid}
<span data-language="My title text is awesome"></span>
<svg id="lang-picker-toggler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="128" height="128">
<!-- our tooltip handler, must be a graphic element for IE -->
<!-- first element so it's set at the background -->
<!-- cover the whole viewPort -->
<!-- fill="none" for less work at rendering -->
<!-- pointer-events=fill so the browser can catch mouse over -->
<rect
x="0" y="0" width="512" height="512"
fill="none"
pointer-events="fill"/>
<path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
<path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
</svg>
fiddle for IE

There's a simpler way. You can can just replace this:
var textString = document.createTextNode(currentLangElement.getAttribute('data-language'));
titleEle.appendChild(textString);
with this:
titleEle.textContent = currentLangElement.getAttribute('data-language');
which does work in IE.

svg object pattern, how to multiply it

So I have a svg pattern which has 9 dots (3x3) inside with a transparent background. I have brought this in my html as an object, because I also have to change the color of the dots, I dont think I can do it with just CSS.
Now I need to repeat this object so I would have fullscreen worth of dots? How would I accomplish that?

So, it is possible to use CSS to change dots color. For example:
<object id="object" type="image/svg+xml" data="/paht/to/mysvg.svg"></object>
var a = document.getElementById("object");
var svgDoc = a.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "* { fill: #000 }";
svgDoc.documentElement.appendChild(styleElement);
And you can access to each childs(dots) in your root(svgDoc.documentElement) and manupulate it as you want, for example to multiply dots and so on via svgDoc.documentElement.childNodes.

I personally like the SVG use tag:
<svg class="icon">
<use xlink:href="#svg-icon" />
</svg>
<svg id="defs" style="display:none">
<defs>
<symbol id="svg-icon" viewBox="0 0 13 13">
<path d="M2,2 L11.1923882,11.1923882"></path>
<path d="M11.1923882,2 L2,11.1923882"></path>
</symbol>
</defs>
</svg>
This example draws you an 'X'. I can style it with CSS by targeting the <svg>:
.icon {
fill: none;
stroke-width: 2;
stroke: red;
}
Props to CSS-Tricks, where I originally picked this up.