无法在内联SVG中使用className.replace (‘无法读取属性'className.replace’of undefined')

Question

在这里，我一直在努力拉动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);
}

Answer 1

在SVG中，不同于className is an SVGAnimatedString，它是一个简单的DOMString。引入这种额外级别的间接性是为了支持SMIL。

要在SVG中操作className，您实际上需要执行以下操作...

candles[i].className.baseVal = ...

也就是说，每次在代码中编写className时，都要追加.baseVal