使用JS编辑SVG文件：实现在SVG区域点击添加叉号或圆圈功能

以下是完整的实现代码，包含单选按钮选择图形、SVG点击绘制的核心逻辑：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SVG Draw Shapes</title>
</head>
<body>
  <div style="margin-bottom: 10px;">
    <label><input type="radio" name="shape" value="cross" checked> 叉号</label>
    <label><input type="radio" name="shape" value="circle"> 圆圈</label>
  </div>
  <svg id="drawArea" width="600" height="400" style="border: 1px solid #ccc;"></svg>

  <script>
    // 获取SVG容器和图形选择控件
    const svg = document.getElementById('drawArea');
    const shapeRadios = document.querySelectorAll('input[name="shape"]');

    // 记录当前选中的图形类型
    let selectedShape = 'cross';

    // 监听单选按钮切换事件
    shapeRadios.forEach(radio => {
      radio.addEventListener('change', () => {
        selectedShape = radio.value;
      });
    });

    // 监听SVG区域左键点击事件
    svg.addEventListener('click', (e) => {
      // 转换鼠标点击坐标为SVG内部相对坐标
      const point = svg.createSVGPoint();
      point.x = e.clientX;
      point.y = e.clientY;
      const svgCoords = point.matrixTransform(svg.getScreenCTM().inverse());

      // 根据选中图形创建对应元素
      if (selectedShape === 'cross') {
        // 创建叉号的两条交叉线
        const line1 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line1.setAttribute('x1', svgCoords.x - 10);
        line1.setAttribute('y1', svgCoords.y - 10);
        line1.setAttribute('x2', svgCoords.x + 10);
        line1.setAttribute('y2', svgCoords.y + 10);
        line1.setAttribute('stroke', '#000');
        line1.setAttribute('stroke-width', 2);

        const line2 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line2.setAttribute('x1', svgCoords.x + 10);
        line2.setAttribute('y1', svgCoords.y - 10);
        line2.setAttribute('x2', svgCoords.x - 10);
        line2.setAttribute('y2', svgCoords.y + 10);
        line2.setAttribute('stroke', '#000');
        line2.setAttribute('stroke-width', 2);

        svg.appendChild(line1);
        svg.appendChild(line2);
      } else if (selectedShape === 'circle') {
        // 创建圆圈
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', svgCoords.x);
        circle.setAttribute('cy', svgCoords.y);
        circle.setAttribute('r', 10);
        circle.setAttribute('stroke', '#000');
        circle.setAttribute('stroke-width', 2);
        circle.setAttribute('fill', 'none');

        svg.appendChild(circle);
      }
    });
  </script>
</body>
</html>

关键细节说明 #

• SVG命名空间：创建SVG元素必须使用document.createElementNS('http://www.w3.org/2000/svg', '元素名')，否则元素无法在SVG中正常渲染。
• 坐标转换：通过createSVGPoint和matrixTransform将页面坐标转换为SVG内部的相对坐标，确保页面滚动、缩放时绘制位置准确。
• 图形定制：可以通过修改stroke、stroke-width、r（圆圈半径）、线的长度等属性，调整图形的颜色、大小样式。
• 事件监听：默认click事件仅响应左键点击，右键触发的contextmenu事件不会触发绘制逻辑。

内容的提问来源于stack exchange，提问作者Oleg Lean