如何为SVG代码分配ID？

Question

我有一张地图的SVG代码。此代码是地图的一部分

<circle opacity="0.33" fill="#913A3A" stroke="#CDC9C4" stroke-miterlimit="10" cx="273.5" cy="231.9" r="18.6"/>

我想在点击按钮时更改其填充颜色。我添加了按钮代码。

我知道它的JavaScript代码。但是，当我为此代码分配ID并按照此

进行测试时

<Pathid = "path1" circle opacity="0.33" fill="#913A3A" stroke="#CDC9C4" stroke-miterlimit="10" cx="273.5" cy="231.9" r="18.6"/>

圆圈从地图上消失。我该怎么处理？

这是我使用的JavaScript

$('#btn-test1').on("click", function() {
  $('#path1').css({ fill: "#ff0000" });
});

Answer 1

据我所知，根本不可能为SVG元素提供ID。无论如何我可能会使用canvas元素。如果我被误导，请告诉我。

Answer 2

在您的示例中，

• 您已使用<circle>自定义元素替换了<pathid>元素。你可能意味着<circle Pathid = "path1".../>
• 但是=周围的空格会出问题，所以<circle Pathid="path1".../>
• 但您尝试为<circle>提供id，而不是某些自定义Pathid属性，所以

<强> <circle id="path1".../>

当使用jQuery更改一个CSS类时，使用语法.css("property","value")可以稍微冗长一点 - 在这种情况下，那是

<强> $('#path1').css("fill","#ff0000");

这里全部放在一起。不要担心我的<svg>的{​​{1}}或其宽度 - 这只是演示的一些基本大小，当圈子在viewbox中时，它将不相关。< / p>

<svg>

$('#btn-test1').on("click", function() {
  $('#path1').css("fill", "#ff0000");
});

svg {
  width: 100px;
}