用户单击时如何将一个SVG交换为另一个SVG

Question

我想显示黑色的SVG，当用户单击其中一个时，我想将其交换为另一个SVG。 有人可以帮我这个忙。

HTML代码：

<svg class = "hidden" onclick="changeImage()" ..... >
<svg class = "scrolling-icon2" .....>

JavaScript代码：

<script>
    function changeImage() {
        if (document.getElementsByClassName("hidden")) {
            document.getElementsByClassName("scrolling-icon2");
        } else {
            document.getElementById("hidden");
        }
    }
</script>

目前，该功能没有任何反应。

Answer 1

我假设您要舍弃scrolling-icon2并隐藏以显示/隐藏。 在这种情况下，请执行以下操作：

 function changeImage() { const img1 = document.getElementById('img1'); const img2 = document.getElementById('img2'); const hidden = 'hidden'; const display = 'scrolling-icon2'; if (img1.classList.contains('hidden')) { // img1 is hidden // displaying img1.classList.add(display); img1.classList.remove(hidden); // hiding img2.classList.add(hidden); img2.classList.remove(display); } else { // img2 is hidden // displaying img2.classList.add(display); img2.classList.remove(hidden); // hiding img1.classList.add(hidden); img1.classList.remove(display); } } 

 .hidden { display: none; } .scrolling-icon2 { display: block; } 

 <svg id="img1" class="hidden" onclick="changeImage()" width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> Sorry, your browser does not support inline SVG. </svg> <svg id="img2" class="scrolling-icon2" onclick="changeImage()" height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> Sorry, your browser does not support inline SVG. </svg> 

在此，我们使用CSS来隐藏/显示。 在JavaScript中，我们获得了两个元素，并检查第一个元素是否被隐藏。 如果是这样，我们将其显示并隐藏另一个。 在另一种情况下（显示img1），我们做相反的事情。

我们通过替换类（.remove（class）和.add（class））来显示/隐藏它们。

Answer 2

    <svg id="svgOne" ..... >
<svg id="svgTwo" style="display: none;" .....>
<script>
    window.onload = function() {
        document.getElementById('svgOne').onclick = function() {
            this.style.display = 'none';
            document.getElementById('svgTwo').style.display = '';
        };

        document.getElementById('svgTwo').onclick = function() {
            this.style.display = 'none';
            document.getElementById('svgOne').style.display = '';
        };
    };
</script>