Применить к фокусу CSS при нажатии на элемент SVG - PullRequest
Новая
       9

Применить к фокусу CSS при нажатии на элемент SVG

1 голос
/ 10 июля 2019

У меня есть файл svg.

Я хотел бы, чтобы при нажатии на название станции она оставалась в масштабе.

Для этого я использовал метод focus, а затем в CSS сселектор :focused применяет эффект

Но это не работает, ничего не происходит.

пс: вы можете игнорировать цикл 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`;
  

  
})

  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>

Ответы [ 2 ]

2 голосов
/ 10 июля 2019

Добавить tabindex к станциям: 

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>
1 голос
/ 10 июля 2019

Вот как я бы это сделал: при нажатии я бы переключил класс active для группы, по которой щелкнули.В вашем коде я добавил это: 

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

внутри 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...