🤖

SVGのマウスオーバーを制御する

2021/04/18に公開

CSS

SVGのマウスオーバーで要素の色を変えたり文字を出したりしたい

要素の色を変えるのはCSSのみで簡単にできた。

      .selectable:hover {
        fill: orange;
        stroke: orange;
      }

要素と関係する文字の表示/非表示切り替えが簡単にできそうな気がして苦戦したのでメモ。

display, visibilityを動的に切り替えてもうまくいかなかった（動的に再描画はしてくれない？）
cssでshownをつくって動的に切り替えたらうまくいった(参考: 　https://teratail.com/questions/132697)

<html>
  <body>
    <style>
      .selectable:hover {
        fill: orange;
        stroke: orange;
      }
      .shown {
        opacity: 1;
      }
    </style>
    <svg width="600px" height="600px" viewbox="0 0 600 600">
    <line id="line1" class="selectable" x1="150" y1="20" x2="250" y2="120" stroke="black" fill="white" stroke-width="2" />
    <text id="line1-text" x="200" y="70"  text-anchor="middle" stroke="blue" opacity="0.0">line1</text>
    <rect id="rect1" class="selectable" x="10" y="10" width="100" height="100" stroke="black" fill="white" stroke-width="2" />
    <text id="rect1-text" x="60" y="60" text-anchor="middle" stroke="blue" opacity="0.0">rect1</text>
    </svg>
    <script>
      let selectableElements = document.getElementsByClassName("selectable");
      Array.from( selectableElements ).forEach(elem => {
        elem.addEventListener("mouseover", eve => {
          let textId = elem.id + "-text";
          let textElem = document.getElementById(textId);
          if( textElem != null ) {
            textElem.classList.add("shown");
          }
        });
        elem.addEventListener("mouseleave", eve => {
          let textId = elem.id + "-text";
          let textElem = document.getElementById(textId);
          if( textElem != null ) {
            textElem.classList.remove("shown");
          }
        });
      });

    </script>
  </body>
</html>

SVGのマウスオーバーで要素の色を変えたり文字を出したりしたい

Discussion