SVG access to path when instantiated with a use (shadowDOM) (vanilla javascript) - 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
Related
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>
CSS hover and cursor don't work in shadow DOM
I'm working on a browser addon that inserts a widget into any website as a shadow DOM, but for some reason I'm unable to make the CSS :hover selector and cursor property working.
Here's the snippet of the content script that creates the shadow DOM:
var inpagePopupHTML = "";
var insertStylesHTML = "";
// load the widget HTML from a resource file (works fine)
$.get(browser.runtime.getURL("/ui/mistake-popup.html"), function(data) {
inpagePopupHTML = data;
});
// load the style for the widget from an HTML file that only contains <style>...</style> (works fine)
$.get(browser.runtime.getURL("/css/insert-styles.html"), function(data) {
insertStylesHTML = data;
document.body.innerHTML += data; // the CSS file is inserted here because it also contains styles for the whole page, not just the inserted widget
});
$("body").append('<div class="grammle--shadow" style="all: initial;"></div>'); // "all: initial" prevents the shadow DOM from inheriting styles
var shadow = document.querySelector(".grammle--shadow").attachShadow({ mode: "open" });
shadow.innerHTML += inpagePopupHTML;
shadow.innerHTML += insertStylesHTML; // the same CSS file is also put into the shadow DOM since it contains styles for the inserted widget
Here's the content of mistake-popup.html:
<div class="grammle--popup grammle--popup--minimised">
<div class="grammle--popup-text">
<span class="grammle--popup-text-counter">0</span>
<span class="grammle--popup-text-label">Fehler</span>
</div>
<div class="grammle--popup-icons">
<span class="grammle--popup-icon" part="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>
</span>
<span class="grammle--popup-icon" part="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
</svg>
</span>
</div>
</div>
Here's insert-styles.html:
<style>
:root {
--grammle-dark-main-colour: #137768;
--grammle-dark-main-colour-hover: #0f6a5d;
}
...
.grammle--popup-icon {
cursor: pointer;
padding: 4px;
background-color: var(--grammle-dark-main-colour);
border-radius: 3px;
}
.grammle--popup-icon:hover {
background-color: var(--grammle-dark-main-colour-hover);
}
...
</style>
Here's a preview of the green widget being correctly inserted and displayed in the right bottom corner on https://keyoxide.org/hkp/pixelcode#dismail.de, just as intended:
As you can see, the “static style” of the widget is correctly applied (so it's not a problem of the CSS not being inserted, for example), but when moving the cursor over either of the icon buttons, neither the darker background colour nor the pointer cursor are applied.
Why is that and how to fix it?
Thanks for your help!
I found a work-around myself: Instead of adding the CSS styles in-line, I added a <head> element to the shadow DOM:
var shadowHead = document.createElement("head");
$(shadowHead).append('<link rel="stylesheet" href="' + browser.runtime.getURL("/css/insert-styles.css") + '" type="text/css" />');
$(shadow).prepend(shadowHead);
I don't know why, but this works now.
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.
Prevent SVG CSS bleeding
So basically I have a webpage with two SVGs. On click the chosen SVG will be visible.
Problem: If a SVG with viewport 0 0 20 20 is loaded first and has a stroke-width of 2 and then you load the other SVG with viewport 0 0 2000 2000, the stroke-width of the first one is inherited to the second one. The 2nd one has now a stroke-width of 2 instead of 200.
This is how the containers are:
<div class="clearView-container">
// svg 2
</div>
<div class="techView-container" style="display: none;">
// svg 1
</div>
svg1:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="273.263mm" height="210.784mm" viewBox="-49.35 -56.0421 136.632 105.392">
<defs>
<style type="text/css">
.pen_style1 {stroke: #000000;stroke-width: 0.25;}
.pen_style3 {stroke: #c6c6c6;stroke-width: 0.125;stroke-dasharray: 1, 0.5}
.pen_style4 {stroke: #ff0000;stroke-width: 0.125;stroke-dasharray: 0.2, 0.5, 1, 0.5}
.cos {stroke: #0037a0;}
.hiddenLine { display: none; }
</style>
</defs>
svg2:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="127.46mm" height="104.6mm" viewBox="-3214 -2698 6373 5230">
<defs>
<style type="text/css">
.pen_style1 {stroke: #000000;stroke-width: 25;}
.pen_style3 {stroke: #c6c6c6;stroke-width: 12.5;stroke-dasharray: 100, 50}
.pen_style4 {stroke: #ff0000;stroke-width: 12.5;stroke-dasharray: 20, 50, 100, 50}
.cos {stroke: #0037a0;}
.hiddenLine { display: none; }
</style>
</defs>
And now the SVG in the clearView-container gets the properties of the one from the techView-container if this one (svg1) is loaded first.
Is there a way to prevent the <defs> of the two SVGs to "bleed through"?
In case an answer is needed by someone. This is how I ended up doing it.
I get the svg from a server as string. Than I used #DBSs solution with the IDs (can't do it server-side so here it is:)
function _injectCustomCSS (svg: string): string {
const newID = 'id' + MathLib.hashCode(svg);
const replaceStr = /.pen/g;
const svgDoc = new DOMParser().parseFromString(svg, 'image/svg+xml');
svgDoc.getElementsByTagName('svg')[0].setAttribute('id', newID);
svgDoc.getElementsByTagName('style')[0].textContent = svgDoc.getElementsByTagName('style')[0].textContent.replace(replaceStr, '#' + newID + '>.pen');
/* ... */
return new XMLSerializer().serializeToString(svgDoc);
};
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.