如何通過getElementById操作SVG

小樊
111
2024-06-18 20:39:55
欄目: 編程語言

要通過getElementById操作SVG，首先需要確保SVG元素?fù)碛幸粋€(gè)唯一的ID。然后可以使用document.getElementById()方法來獲取該SVG元素，然后再對(duì)其進(jìn)行操作，比如修改其樣式或?qū)傩浴?/p>

以下是一個(gè)簡單的示例：

<svg id="mySVG" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

<script>
  // 獲取SVG元素
  var svg = document.getElementById('mySVG');
  
  // 修改SVG元素的樣式
  svg.style.backgroundColor = 'lightblue';
  
  // 修改SVG元素中的屬性
  var circle = document.querySelector('circle');
  circle.setAttribute('fill', 'blue');
</script>

在上面的示例中，我們首先通過getElementById獲取了ID為mySVG的SVG元素，然后修改了它的樣式和其中圓形元素的填充顏色。您可以根據(jù)需要使用其他屬性或方法來操作SVG元素。

0 踩