无法使用 JavaScript 交换 <image> href答案

【问题标题】：Unable to swap <image> href using JavaScript无法使用 JavaScript 交换 <image> href
【发布时间】：2021-05-26 20:07:08
【问题描述】：

此代码用于更改 href 的值，我可以确认这一点，因为警报按预期交替确认。但是，<image> 是不变的。有什么问题？

var onImg= "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg";
var offImg= "https://upload.wikimedia.org/wikipedia/commons/3/3d/1951_Unión_1-Colón_1.png";
function toggleImage() {
  if (this.href == onImg) {
    alert('turning off');
    this.href = offImg;
  } else {
    alert('turning on');
    this.href = onImg;
  }
}

<ul class="board">
  <li>
     <svg width="100%" height="100%" viewBox="0 0 2911 2521">
        <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg" onclick="toggleImage()"/>
    </svg>
  </li>
</ul>

【问题讨论】：

我正在使用标签而不是标签
我相信这已经被弃用了。见：w3.org/TR/SVG2/linking.html
好的，我已经纠正了。我一定错过了这个变化。

标签： javascript html css svg

【解决方案1】：

一些事情：

首先您为您的图片设置一个 clipPath，但没有定义它，这将阻止点击事件至少在 Firefox 中触发您的图片。
然后您将事件处理程序附加为事件属性，this 不会以这种方式传递，您必须自己从事件处理程序传递它。
最后，SVGImageElement.href 是SVGAnimatedString，而不是字符串。如果你想检索或编辑它，你需要获取或设置它的.baseVal值：

var onImg= "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg";
var offImg= "https://upload.wikimedia.org/wikipedia/commons/3/3d/1951_Unión_1-Colón_1.png";
function toggleImage(img) {
  if (img.href.baseVal == onImg) {
    alert('turning off');
    img.href.baseVal = offImg;
  } else {
    alert('turning on');
    img.href.baseVal = onImg;
  }
}

<ul class="board">
  <li>
     <svg width="100%" height="100%" viewBox="0 0 2911 2521">
        <image height="100%" width="100%" href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg" onclick="toggleImage(this)"/>
    </svg>
  </li>
</ul>

或者您可以简单地设置属性，并使用正确的事件处理程序：

var onImg= "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg";
var offImg= "https://upload.wikimedia.org/wikipedia/commons/3/3d/1951_Unión_1-Colón_1.png";
document.querySelector("image").addEventListener("click",  function toggleImage(evt) {
  const current_value = this.getAttribute("href");
  if (current_value == onImg) {
    alert('turning off');
    this.setAttribute("href", offImg);
  } else {
    alert('turning on');
    this.setAttribute("href", onImg);
  }
});

<ul class="board">
  <li>
     <svg width="100%" height="100%" viewBox="0 0 2911 2521">
        <image height="100%" width="100%" href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg"/>
    </svg>
  </li>
</ul>

【讨论】：