TML 中使用 SVG 图像,可以使用
例如:
<svg width="100" height="100" viewBox="0 0 50 50">
<rect x="10" y="10" width="30" height="30" fill="#f00"/>
</svg>
在 CSS 中对 SVG 进行样式设置与常规图片一样,可以通过选择器和 CSS 属性进行操作,例如:
svg {
width: 200px;
height: 200px;
}
在 JavaScript 中操作 SVG 的方法有很多种,其中最常用的是使用 Document 对象的 getElementById("id") 方法获取 SVG 对象,然后可以进行属性和样式的修改,或者通过创建新的 path/line 元素来插入新的图形。例如:
var svg = document.getElementById('my-svg');
svg.setAttribute('width', '500');
svg.setAttribute('height', '500');
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '10');
rect.setAttribute('y', '10');
rect.setAttribute('width', '50');
rect.setAttribute('height', '50');
rect.setAttribute('fill', '#0f0');
svg.appendChild(rect);
需要注意的是,在 JavaScript 中操作 SVG 需要使用 createElementNS 方法来创建新的 SVG 元素,同时要指定正确的命名空间 "http://www.w3.org/2000/svg"。同时,在进行 SVG 动画时,可以使用 SMIL(Synchronized Multimedia Integration Language)或 JavaScript 实现。