如何根据单独的 HTML 元素的悬停更改 SVG 元素的填充？

Question

我有一个简单的 SVG 图形（基本上是 4 个正方形）合二为一 div。 div 旁边是另一个 div，有 4 个 HTML 按钮。我希望在悬停按钮 1 时，其中一个 SVG 方块会更改其背景颜色。在悬停按钮 2 时，另一个 SVG 方块会更改其背景颜色，对于接下来的 2 个按钮和 SVG 方块也是如此。（当鼠标悬停在相应的按钮外时，SVG 方块会返回无填充状态。）

我一直在研究这个问题，但还没有找到解决办法。据我了解，我无法使用 CSS 执行此操作，但是使用 jQuery 或 javascript 可以吗？

为了上下文；我试图了解此页面上的交互式图形是如何工作的：https://the-jay.ch/wohnungen（向下滚动到“WOHNUNGSANGEBOT”）

.cls-1 {
  fill: none;
  stroke: #231f20;
  stroke-miterlimit: 10;
  stroke-width: 35px;
}

.svg_section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 500px;
}

.svg_wrapper {
  overflow: hidden;
  width: 50%;
  height: 100%;
}

.html-embed {
  width: 100%;
  height: 100%;
}

.svg_trigger_div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #e4b5b5;
}

.button1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #973535;
}

.button2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #5aac6c;
}

.button3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #559bbb;
}

.button4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(162, 71, 153, 0.72);
}

.text-block {
  line-height: 14px;
}

<div class="svg_section">
  <div class="svg_wrapper">
    <div class="html-embed w-embed">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1035 1035.92">
        <defs></defs>
        <rect id="rec4" class="cls-1" x="17.5" y="17.5" width="500" height="500"></rect>
        <rect id="rec3" class="cls-1" x="517.5" y="17.5" width="500" height="500"></rect>
        <rect id="rec2" class="cls-1" x="17.5" y="518.42" width="500" height="500"></rect>
        <rect id="rec1" class="cls-1" x="517.5" y="518.42" width="500" height="500"></rect>
      </svg>
    </div>
  </div>
  <div class="svg_trigger_div">
    <a href="#" class="button1 w-inline-block">
      <div class="text-block">Button 1</div>
    </a>
    <a href="#" class="button2 w-inline-block">
      <div class="text-block">Button 2</div>
    </a>
    <a href="#" class="button3 w-inline-block">
      <div class="text-block">Button 3</div>
    </a>
    <a href="#" class="button4 w-inline-block">
      <div class="text-block">Button 4</div>
    </a>
  </div>
</div>

Answer 1

按照您的编码方式，您不能仅使用 css。您需要将 Javascript 与 MouseOver 或 MouseEnter EventListener

结合使用

Answer 2

var allClasses = [], theSVG = null;
function changeSvgClasslist(add){
    if( theSVG ){
        allClasses.forEach( oneClass => { theSVG.classList.remove(oneClass); } )
        if(add) theSVG.classList.add(add);
        console.log(theSVG.classList);
    }
}

function btnOver(evt){
    let btnClass = evt.target.getAttribute('data-class');
    changeSvgClasslist(btnClass);
}
function btnOut(evt){
    changeSvgClasslist(null);
}

document.addEventListener('DOMContentLoaded', () => {
    theSVG = document.querySelector('#Layer_1');
    let theButtons = document.querySelectorAll('#svg_trigger_div .w-inline-block');
    console.log("I see %d buttons.", theButtons.length);
    theButtons.forEach( (btn,idx) => {
        let curClass = 'btnHover'+ (idx+1);
        allClasses.push( curClass );
        btn.setAttribute('data-class', curClass);
        btn.addEventListener('mouseenter', btnOver);
        btn.addEventListener('mouseleave', btnOut);
    } )
});

.cls-1{
  fill:none;
  stroke:#231f20;
  stroke-miterlimit:10;
  stroke-width:35px;
  }

.svg_section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 500px;
}

.svg_wrapper {
  overflow: hidden;
  width: 50%;
  height: 100%;
}

.html-embed {
  width: 100%;
  height: 100%;
}

#svg_trigger_div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #e4b5b5;
}

.button1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #973535;
}

.button2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #5aac6c;
}

.button3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #559bbb;
}

.button4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(162, 71, 153, 0.72);
}

.text-block {
  line-height: 14px;
}

.btnHover1 #rec1{ fill: red; }
.btnHover2 #rec2{ fill: red; }
.btnHover3 #rec3{ fill: red; }
.btnHover4 #rec4{ fill: red; }

<div class="svg_section">
    <div class="svg_wrapper">
        <div class="html-embed w-embed"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1035 1035.92">
            <defs></defs>
            <rect id="rec4" class="cls-1" x="17.5" y="17.5" width="500" height="500"></rect>
            <rect id="rec3" class="cls-1" x="517.5" y="17.5" width="500" height="500"></rect>
            <rect id="rec2" class="cls-1" x="17.5" y="518.42" width="500" height="500"></rect>
            <rect id="rec1" class="cls-1" x="517.5" y="518.42" width="500" height="500"></rect>
        </svg></div>
    </div>
    <div id="svg_trigger_div">
        <a href="#" class="button1 w-inline-block">
            <div class="text-block">Button 1</div>
        </a>
        <a href="#" class="button2 w-inline-block">
            <div class="text-block">Button 2</div>
        </a>
        <a href="#" class="button3 w-inline-block">
            <div class="text-block">Button 3</div>
        </a>
        <a href="#" class="button4 w-inline-block">
            <div class="text-block">Button 4</div>
        </a>
    </div>
</div>

如何根据单独的 HTML 元素的悬停更改 SVG 元素的填充？

How to change fill of an SVG element based on hover of an separate HTML element?

javascript

jquery

svg