javascript - 不能将 className.replace 与内联 SVG 一起使用（'无法读取未定义的属性 'className.replace'）

问题描述

我一直在努力拉动 SVG 文档中的类，以便将类附加/替换到 rect 元素。我已经在外部文档中的 div 上测试了这段代码，一切正常，尝试了多种其他解决方案 - 发布在下面。我对javascript不是很有经验，所以提前谢谢你！

HTML

                <svg id="candleSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468.05 446.9">
                <defs>
                    <style></style>
                </defs>
                <g id="Layer_2" data-name="Layer 2">
                    <g id="Слой_1" data-name="Слой 1">
                        <rect onclick="currentSlide(1)" onmouseover="currentSlide(1)" class="cls cls-1" x="5" y="134.7" width="56.5" height="156.6"/>
                        <line class="cls-2" x1="33.25" y1="134.7" x2="33.25" y2="46.1"/>
                        <line class="cls-2" x1="33.25" y1="291.3" x2="33.25" y2="434.7"/>
                        <line class="cls-2" x1="165.65" y1="93.6" x2="165.65" y2="5"/>
                        <line class="cls-2" x1="165.65" y1="267.4" x2="165.65" y2="384.8"/>

                        <rect onclick="currentSlide(2)" onmouseover="currentSlide(2)" class="cls cls-3" x="137.45" y="93.6" width="56.5" height="209.1"/>
                        <line class="cls-2" x1="298.85" y1="221.6" x2="298.85" y2="62.2"/>
                        <line class="cls-2" x1="298.85" y1="324.5" x2="298.85" y2="441.9"/>

                        <rect onclick="currentSlide(4)" onmouseover="currentSlide(4)" class="cls cls-4" x="406.55" y="104.7" width="56.5" height="155.1"/>
                        <line class="cls-2" x1="434.85" y1="104.7" x2="434.85" y2="16.1"/>
                        <line class="cls-2" x1="434.85" y1="259.8" x2="434.85" y2="374.1"/>

                        <rect onclick="currentSlide(3)" onmouseover="currentSlide(3)" class="cls cls-5" x="270.65" y="182.8" width="56.5" height="177"/>
                    </g>
                </g>
                </svg>
                <div class="cls-slide">
                    <h2>TEST 1</h2>
                    <p></p>
                </div>

                <div class="cls-slide">
                    <h2>TEST 2</h2>
                    <p></p>
                </div>

                <div class="cls-slide">
                    <h2>TEST 3</h2>
                    <p></p>
                </div>

                <div class="cls-slide">
                    <h2>TEST 4</h2>
                    <p></p>
                </div>

CSS

/* CANDLE STICK SVG */

.cls-1 {
    fill:#9b0808;
}
.cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
    stroke:#0c110b;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:10px;
}
.cls-1, .cls-3, .cls-4, .cls-5 {
    cursor: pointer;
}
.cls-2 {
    fill:none;
}
.cls-3 {
    fill:#e81010;
}
.cls-4 {
    fill:#4bd227;
}
.cls-5 {
    fill:#1d6b0a;
}

.active, .cls:hover {
    fill: #78f754;
}

.cls-slide {
    display: none;
}

JS（测试 1）

var slideIndex = 1;
    showSlides(slideIndex);

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("cls-slide");
        var candleSVG = document.getElementById("candleSVG").contentDocument;
        var candles = candleSVG.getElementsByClassName("cls");

        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < candles.length; i++) {
            candles[i].className = candles[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        candles[slideIndex-1].className += " active";
}

JS（测试 2）

var slideIndex = 1;
showSlides(slideIndex);


window.addEventListener("load", function showSlides(n) {

    var i;
    var slides = document.getElementsByClassName("cls-slide");
    var candleSVG = document.getElementById("candleSVG").contentDocument;
    var candles = candleSVG.getElementsByClassName("cls");

    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < candles.length; i++) {
        candles[i].className = candles[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    candles[slideIndex-1].className += " active";
});

function currentSlide(n) {
    showSlides(slideIndex = n);
}

标签： javascripthtmlcsssvg

javascript - 不能将 className.replace 与内联 SVG 一起使用（'无法读取未定义的属性 'className.replace'）

问题描述

解决方案

推荐阅读