如何通过路径ID修改SVG路径元素的d属性

当然可以实现啦！你已经引入了jQuery，刚好能借助它便捷的DOM操作能力完成这个需求，我给你一步步说明怎么修改你的代码：

核心思路 #

通过路径元素的ID精准定位到目标<path>，然后直接修改它的d属性值就可以了，按钮的点击事件已经绑定好了change_line_d函数，我们只需要补全这个函数的逻辑就行。

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="change_line_d()">Change Line</button>

<div id="main-container" style="width: 800px; height: 600px; border:1px solid #DA096C;">
  <svg id="svg-id" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit;" version="1.1">
    <path data-key="12345" id="path_id_1" transform="matrix(1,0,0,-1,0,600)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 124.34 185.57 L 154.34 200 L 135.22 250 "/>
  </svg>
</div>

<script>
function change_line_d() {
  // 通过ID选中目标路径元素，修改它的d属性
  $('#path_id_1').attr('d', 'M 164.34 115.57 L 194.34 280 L 131.22 280 L 111.22 980 ');
}
</script>

简单说明 #

• 新增的<script>块里定义了change_line_d函数，当你点击按钮时就会触发这个函数
• $('#path_id_1')是jQuery的选择器，通过ID精准找到你要修改的路径
• .attr('d', '新路径值')就是把目标路径的d属性替换成你想要的新路径数据

这样点击按钮后，SVG里的路径就会立刻变成你想要的样子啦！

备注：内容来源于stack exchange，提问作者Johnathan Wick