如何為 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 是不可能的。 無論如何，我可能會為此使用畫布元素。 如果我被誤導了，請告訴我。

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>的viewbox或其寬度 - 這只是演示的一些基本大小，當圓圈在你的<svg>時不會相關。

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

 svg { width: 100px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <svg id="btn-test1" viewbox="0 0 40 40"> <circle id="path1" opacity="0.33" fill="#913A3A" stroke="#CDC9C4" stroke-miterlimit="10" cx="20" cy="20" r="18.6" /> </svg>