如何使用 JavaScript 與 SVG 元素互動？

使用JavaScript 存取SVG 元素

SVG（可縮放向量圖形）允許設計者建立可以動態操作和縮放而不會丟失的向量圖形品質。要使用 JavaScript 存取和操作 SVG 元素，您有兩個主要選擇：使用內建瀏覽器 API 或利用 Raphaël 或 jQuery SVG 等外部函式庫。

使用內建瀏覽器API

原生JavaScript 方法涉及使用文件物件模型(DOM) 存取SVG 元素：

1. 取得SVG 物件的引用：

   const svgObject = document.getElementById("mySVG");

2. 透過ID 存取各個元素：

   const deltaPath = svgObject.contentDocument.getElementById("delta");

3. 操作元素的屬性：

   deltaPath.setAttribute("fill", "#00FF00");

4. 新增事件偵聽器以回應使用者互動：

   deltaPath.addEventListener("click", () => {
     alert("Hello World!");
   });

注意：

此方法要求將SVG 載入到與HTML 檔案相同的網域中，因為同源策略。

使用外部函式庫

或者，您可以使用Raphaël 或jQuery SVG 等外部函式庫：

1. 在HTML 中包含該庫：

   <script src="raphael.js"></script>

2. 使用該庫建立和操作SVG 元素：

   var paper = Raphael("mySVG");
   var deltaPath = paper.path("M34.074,86.094...");
   
   deltaPath.click(function() {
     alert("Hello World!");
   });

方法比較

方法比較

Feature	Built-in APIs	External Libraries
Performance	Lower	Higher
Cross-browser compatibility	Varies	Generally good
Ease of use	Medium	Easier
Flexibility	Limited	Greater

方法比較方法比較

功能	內建API	外部函式庫
效能	較低	較高
跨瀏覽器相容性	變化	整體良好
輕鬆使用	中	更容易
靈活性	有限	更大 tr>

最佳選擇最佳選擇取決於您的特定要求。如果效能和對 DOM 的直接存取至關重要，那麼首選使用內建 API。然而，如果跨瀏覽器相容性、易用性和廣泛的功能更重要，那麼外部程式庫是更好的選擇。

以上是如何使用 JavaScript 與 SVG 元素互動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！