javascript的SVG如何操作_如何用脚本创建和修改矢量图形？

JavaScript操作SVG需用createElementNS指定命名空间，通过setAttribute修改属性，querySelector选取元素，path元素靠d属性绘制图形，并注意大小写敏感和坐标系等细节。

JavaScript 操作 SVG 的核心是把它当作 DOM 元素来处理——SVG 标签（如 <svg></svg>、<circle></circle>、<path></path>）都是标准的 HTML 元素，可以直接用 document.createElementNS 创建、用 setAttribute 修改属性、用 appendChild 添加，也能用 querySelector 选中并动态更新。

用脚本创建 SVG 元素

普通 document.createElement 不适用于 SVG，必须用命名空间（namespace）创建：

• const svgNS = "http://www.w3.org/2000/svg";
• const svg = document.createElementNS(svgNS, "svg");
• const circle = document.createElementNS(svgNS, "circle");
• 然后设置属性：circle.setAttribute("cx", "50"); circle.setAttribute("cy", "50"); circle.setAttribute("r", "20");
• 最后挂载：svg.appendChild(circle); document.body.appendChild(svg);

修改已有 SVG 图形

如果页面里已有内联 SVG（比如写在 HTML 中的 <svg>...</svg>），可直接用常规 DOM 方法操作：

• const myCircle = document.querySelector("circle");
• 改位置：myCircle.setAttribute("cx", "100");
• 改样式：myCircle.setAttribute("fill", "#ff6b6b");
• 改尺寸或颜色时，注意单位（如 stroke-width="2" 是数字，不是 "2px"）
• 也可以用 myCircle.style.opacity = 0.7; 控制 CSS 属性

动态绘制路径（path）和复杂图形

<path></path> 是最灵活的 SVG 元素，靠 d 属性定义形状。脚本中可拼接字符串生成路径指令：

标签： css javascript java html js svg app