Question

我想用完全相同位置的图像替换此SVG对象。可能有一种CSS方式可以解决它，但由于某个特定原因，我宁愿完全使用Javascript来解决这个问题！

<circle id="Sun" class="st0" cx="500" cy="300.8" r="30.3" onclick="changePic();"/>

这个功能可能需要一些调整。

function changePic(src)
{
        var im = document.getElementById("Sun"); 
        im.setAttribute("Sun",  "im");
        im.setAttribute("src", src || "img/picture.png");       
}

"img/picture.png"是文件夹和里面的图片。

此外，当双击SVG时，Javascript中是否有一种方法可以调用此函数，而不是单击一次。我知道这不是我的要求，但如果我也得到了帮助，我将不胜感激。

Answer 1

试试这个

var svg = document.getElementById('Sun');

var src; // undefined

if (svg) {
  svg.addEventListener('click', function(event) {
    var img = document.createElement("img");
    img.setAttribute("Sun", "im");
    img.src = src || "img/picture.png";

    this.parentNode.replaceChild(img, this);
  }, false);
}

<!-- <circle id="Sun" class="st0" cx="500" cy="300.8" r="30.3" onclick="changePic();" /> -->

<svg id="Sun" class="st0" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="25" fill="#191919" />
</svg>

用图像

1 个答案: