单击svg元素时应用焦点css

Question

I have an svg file.

I would that when I click on a station name, the station stay scaled.

For that I used focus method and then in CSS with the selector :focused apply the effect

But that's not working , nothing is happening.

ps: you can ignore forEach loop it's not so important to understand

 let stops = document.querySelector("#stops"); // all the g elements in the stops let gs = stops.querySelectorAll("g"); // for each g in the gs gs.forEach(g=>{ // the rectangle in this g element let thisRect = g.querySelector("rect"); // the circle in this g element let thisCircle = g.querySelector("circle"); // the coords of the circle's center used for the transform-origin let x = thisCircle.getAttribute("cx"); let y = thisCircle.getAttribute("cy"); // the bounding box of the group let bb = g.getBBox(); // set the rect's attributes thisRect.setAttributeNS(null, "x", bb.x); thisRect.setAttributeNS(null, "y", bb.y); thisRect.setAttributeNS(null, "width", bb.width); thisRect.setAttributeNS(null, "height", bb.height); // set the value for the transform-origin for this group g.style.transformOrigin = `${x}px ${y}px`; }) document.getElementById('g3670').focus() function showmessage() { alert("heloo"); } 

 text{ font-family: Lato; font-size:16px; } g * {pointer-events:none;} g rect{pointer-events:all;} #stops g{transform: scale(1);cursor: pointer;} #stops g:hover { transform: scale(2); } #stops g:active { transform: scale(2) } 

 <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 775.43 469.98"> <defs> <style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style> </defs> <title>line</title> <path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" /> <path id="path8" class="cls-1" d="M329.35,215.87,449,355" transform="translate(-200.1 -66.09)" /> <path id="path9" class="cls-1" d="M449,355c41.53,51.11,96.22,63.08,117.9,69.28" transform="translate(-200.1 -66.09)" /> <path id="path10" class="cls-1" d="M566.86,424.29C655.43,460.48,977.38,391.48,973,536" transform="translate(-200.1 -66.09)" /> <g id="stops"> <g id="g3670"> <rect fill="none"/> <circle class="cls-2" cx="129.24" cy="149.78" r="13.58" /> <text id="text3668" class="cls-3" transform="translate(145 160)">Station1</text> </g> <g id="g3700"> <rect fill="none"/> <circle class="cls-2" cx="248.91" cy="288.93" r="13.58" /> <text id="text3698" class="cls-3" transform="translate(270 300)">Station2</text> </g> <g id="g3750"> <rect fill="none"/> <circle class="cls-2" cx="366.75" cy="358.2" r="13.58" /> <text id="text3748" class="cls-3" transform="translate(200 400)">Station3</text> </g> </g> </svg> 

Answer 1

Add tabindex to stations:

 let stops = document.querySelector("#stops"); // all the g elements in the stops let gs = stops.querySelectorAll("g"); // for each g in the gs gs.forEach((g, i) => { g.setAttribute('tabindex', i); // the rectangle in this g element let thisRect = g.querySelector("rect"); // the circle in this g element let thisCircle = g.querySelector("circle"); // the coords of the circle's center used for the transform-origin let x = thisCircle.getAttribute("cx"); let y = thisCircle.getAttribute("cy"); // the bounding box of the group let bb = g.getBBox(); // set the rect's attributes thisRect.setAttributeNS(null, "x", bb.x); thisRect.setAttributeNS(null, "y", bb.y); thisRect.setAttributeNS(null, "width", bb.width); thisRect.setAttributeNS(null, "height", bb.height); // set the value for the transform-origin for this group g.style.transformOrigin = `${x}px ${y}px`; }) document.getElementById('g3670').focus() function showmessage() { alert("heloo"); } 

 text{ font-family: Lato; font-size:16px; } g * {pointer-events:none;} g rect{pointer-events:all;} #stops g{transform: scale(1);cursor: pointer;transition:.3s} #stops g:hover { transform: scale(2); } #stops g:focus { outline: 0; transform: scale(2) } 

 <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 775.43 469.98"> <defs> <style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style> </defs> <title>line</title> <path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" /> <path id="path8" class="cls-1" d="M329.35,215.87,449,355" transform="translate(-200.1 -66.09)" /> <path id="path9" class="cls-1" d="M449,355c41.53,51.11,96.22,63.08,117.9,69.28" transform="translate(-200.1 -66.09)" /> <path id="path10" class="cls-1" d="M566.86,424.29C655.43,460.48,977.38,391.48,973,536" transform="translate(-200.1 -66.09)" /> <g id="stops"> <g id="g3670"> <rect fill="none"/> <circle class="cls-2" cx="129.24" cy="149.78" r="13.58" /> <text id="text3668" class="cls-3" transform="translate(145 160)">Station1</text> </g> <g id="g3700"> <rect fill="none"/> <circle class="cls-2" cx="248.91" cy="288.93" r="13.58" /> <text id="text3698" class="cls-3" transform="translate(270 300)">Station2</text> </g> <g id="g3750"> <rect fill="none"/> <circle class="cls-2" cx="366.75" cy="358.2" r="13.58" /> <text id="text3748" class="cls-3" transform="translate(200 400)">Station3</text> </g> </g> </svg> 

Answer 2

This is how I would do it: on click I would toggle a class active for the clicked group. In your code I've added this:

  g.addEventListener("click",()=>{
    g.classList.toggle("active")
  })

inside the forEach .

 let stops = document.querySelector("#stops"); // all the g elements in the stops let gs = stops.querySelectorAll("g"); // for each g in the gs gs.forEach(g=>{ // the rectangle in this g element let thisRect = g.querySelector("rect"); // the circle in this g element let thisCircle = g.querySelector("circle"); // the coords of the circle's center used for the transform-origin let x = thisCircle.getAttribute("cx"); let y = thisCircle.getAttribute("cy"); // the bounding box of the group let bb = g.getBBox(); // set the rect's attributes thisRect.setAttributeNS(null, "x", bb.x); thisRect.setAttributeNS(null, "y", bb.y); thisRect.setAttributeNS(null, "width", bb.width); thisRect.setAttributeNS(null, "height", bb.height); // set the value for the transform-origin for this group g.style.transformOrigin = `${x}px ${y}px`; g.addEventListener("click",()=>{ g.classList.toggle("active") }) }) document.getElementById('g3670').focus() function showmessage() { console.log("heloo"); } 

 text{ font-family: Lato; font-size:16px; } g * {pointer-events:none;} g rect{pointer-events:all;} #stops g{transform: scale(1);cursor: pointer;} #stops g:hover { transform: scale(2); } #stops g.active { transform: scale(2) } 

 <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 775.43 469.98"> <defs> <style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style> </defs> <title>line</title> <path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" /> <path id="path8" class="cls-1" d="M329.35,215.87,449,355" transform="translate(-200.1 -66.09)" /> <path id="path9" class="cls-1" d="M449,355c41.53,51.11,96.22,63.08,117.9,69.28" transform="translate(-200.1 -66.09)" /> <path id="path10" class="cls-1" d="M566.86,424.29C655.43,460.48,977.38,391.48,973,536" transform="translate(-200.1 -66.09)" /> <g id="stops"> <g id="g3670"> <rect fill="none"/> <circle class="cls-2" cx="129.24" cy="149.78" r="13.58" /> <text id="text3668" class="cls-3" transform="translate(145 160)">Station1</text> </g> <g id="g3700"> <rect fill="none"/> <circle class="cls-2" cx="248.91" cy="288.93" r="13.58" /> <text id="text3698" class="cls-3" transform="translate(270 300)">Station2</text> </g> <g id="g3750"> <rect fill="none"/> <circle class="cls-2" cx="366.75" cy="358.2" r="13.58" /> <text id="text3748" class="cls-3" transform="translate(200 400)">Station3</text> </g> </g> </svg>