使用JavaScript对svg图片进行修改

在网页开发中，SVG（可缩放矢量图形）以其独特的优势被广泛应用。它基于XML语法，可提供高质量的图形展示，且在各种设备上都能完美缩放。而JavaScript作为强大的脚本语言，能与SVG结合，实现动态、交互性强的图形效果。

要在HTML中引入SVG图形。可以直接将SVG代码嵌入到HTML文件中，也可以通过<img>标签、<object>标签或<embed>标签引入外部SVG文件。例如，直接嵌入的代码如下：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

接下来，使用JavaScript获取SVG元素。如果是嵌入的SVG，可以使用document.querySelector方法。假设上述SVG有一个id为“mySvg”，获取代码为：

const svg = document.querySelector('#mySvg');

若通过标签引入外部SVG，获取方式会有所不同。以<object>标签为例：

<object data="example.svg" type="image/svg+xml" id="svgObject"></object>

JavaScript获取代码为：

const svgObject = document.getElementById('svgObject');
const svg = svgObject.contentDocument.documentElement;

获取SVG元素后，就可以对其进行修改。比如修改SVG中某个图形元素的属性。对于上面的圆形，想改变其填充颜色为红色，代码如下：

const circle = svg.querySelector('circle');
circle.setAttribute('fill','red');

还可以动态创建新的SVG元素并添加到现有SVG中。创建一个新的矩形：

const rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
rect.setAttribute('x', '50');
rect.setAttribute('y', '50');
rect.setAttribute('width', '100');
rect.setAttribute('height', '100');
rect.setAttribute('fill', 'green');
svg.appendChild(rect);

另外，结合JavaScript的事件监听，可以实现SVG的交互效果。为圆形添加点击事件，点击后改变其半径：

circle.addEventListener('click', function() {
  this.setAttribute('r', '70');
});

通过JavaScript对SVG图片进行修改，能为网页增添丰富的动态效果和交互性，极大提升用户体验，是网页开发者值得深入探索和应用的技术组合。