如何在svg元素上添加和删除css类

how to add and remove css class on svg element

本文关键字：删除 css 添加 svg 元素      更新时间：2023-09-26

我有一系列svg圆：

<svg id="pt124" class="marker aaa" style="left: 842.984px; top: 175.607px;"><circle style="fill: blue;" cy="10" fill="#CCCCCC" cx="10" r="4.5"></circle></svg>
<svg id="pt125" class="marker aaa" style="left: 553.565px; top: 106.903px;"><circle style="fill: blue;" cy="10" fill="#CCCCCC" cx="10" r="4.5"></circle></svg>
<svg id="pt126" class="marker aaa" style="left: 608.487px; top: 191.06px;"><circle style="fill: blue;" cy="10" fill="#CCCCCC" cx="10" r="4.5"></circle></svg>

我需要为这些对象添加一个类"隐藏"。我尝试过几件事都没有成功：

$("svg#"+data[i]['name']).attr("class", "marker aaa hide");
$("svg#"+data[i]['name']+" circle").setAttribute("visibility", "hidden");
$("#"+data[i]['name']).context.hidden = false;

我错过了什么？如何将类添加到该类中？THanks

如果您想向所有圆添加一个类，那么您需要类似的东西

 d3.selectAll("circle")
   .attr("class", "hide");

这相当于：

 d3.selectAll("circle")
   .classed("hide", true);

虽然我不知道你在哪里具体使用d3.js。您提供的代码使用jQuery语法（$(a bunch of stuff)）。

尝试添加类：-

$("svg#"+data[i]['name'] + ' circle').attr("class", "hide");

如果你想切换元素，你可以这样做：-

$("svg#"+data[i]['name'] + ' circle').toggle();
相关文章：