javascript - 将 CSS 样式添加到 SVG

Question

我有一个 SVG，我想在其中为所有具有 r="5"的圆添加一个特定的样式

<div class="svgchart">
    <svg width="1190" height="390">
        <circle  class="bubble-plot-chart-circle" cx="400" cy="400" r="40" fill="blue"></circle>
        <circle  class="bubble-plot-chart-circle" cx="400" cy="400" r="5" fill="blue"></circle>
        <circle class="bubble-plot-chart-circle " cx="400" cy="400" r="5" fill="blue"></circle>
    </svg>  
</div>

我试过了，但是不行

var allElements = document.getElementsByClassName("bubble-plot-chart-circle");

for(var i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    if(element.getAttribute("r") === "5") {
        // it takes the initial inline style which was applied at the time of crating the SVG
        element.setAttribute("opacity", "0 !important");// does not work for SVG  
        element.addClass("test"); // does not work for SVG 
    } 
}

谁能帮我解决这个问题，因为我是 SVG 的新手

Answer 1

试试这个:

我使用 querySelectorAll 获取具有提供的类名和属性的过滤元素。

var allElements = document.querySelectorAll(".bubble-plot-chart-circle[r='5']");   // filtering as required

for(var i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    element.setAttribute("opacity", "0");  // !important is invalid in presentation attribute (check comment above)
    element.classList.add("test");         // JavaScript's method instead of jquery's addClass method
}

addClass 方法也不适用于 JavaScript DOM 对象。它可用于 jQuery 对象。如果要使用 addClass 方法，将 DOM 对象转换为 jquery 对象，如下所示:

var jqueryElement = $(element);
jqueryElement.addClass('test');

此外，您也可以使用 CSS 进行相同的选择:

.bubble-plot-chart-circle[r='5'] {
     /* SVG styles here */
}