SVG JS 动态赋值

通过 text 标签进行测试

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
    <defs>
      <!-- 网格 -->
      <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <path fill="none" stroke="#f1f1f1" d="M 0 0 H 20 V 20"/>
      </pattern>
    </defs>
    <!-- 绘制网格 -->
    <rect width="600" height="400" fill="url(#grid)"/>
    <!-- 基线对齐效果 -->
    <path d="M 100 0 V 300 M 0 100 H 400 M 0 200 H 400 M 0 300 H 400" stroke="red"/>
    <text id="textObject" x="100" y="100" style="font-size: 50px;">ABCDEFG</text>
</svg>
<script>
    // 动态数据
    var dx = [10, 20, 30, 40, 50]
    var dy = [10, 20, 30, 40, 50]
    // 设置
    textObject.setAttribute('dx', dx.join(' '))
    textObject.setAttribute('dy', dy.join(' '))
</script>