I've hit a roadblock trying to manipulate classes within an SVG document to modify the rect elements. The code works smoothly on divs in an external document, but I've tried several other solutions as well – all listed below. I'm still relatively new to JavaScript, so any help is greatly appreciated!
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(TEST 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(TEST 2)
window.addEventListener("load", function showSlides(n) {
var slideIndex = 1;
showSlides(slideIndex);
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);
}