javascript 更改SVG路径的d属性

ryevplcw 于 2023-03-11 发布在 Java

关注(0)|答案(1)|浏览(165)

<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>

在我的SVG路径中，是否有一种方法可以使用path_id更改每个SVG路径的d属性**，**例如，我希望单击某个按钮，它会将d路径更改为

d="M 164.34 115.57 L 194.34 280 L 131.22 280 L 111.22 980 "/>

请问有没有办法做到这一点？任何帮助都将非常感谢：）
在here中，有人问了一个与我的问题非常相似的问题，但我不确定如何在我的代码中实现它

JavaScript

来源：https://stackoverflow.com/questions/75698184/change-d-attribute-of-svg-path

1条答案

按热度按时间

ktecyv1j1#

此功能将更改路径。

function change_line_d(){
    document.getElementById("path_id_1")
    .setAttribute("d","M 164.34 115.57 L 194.34 280 L 131.22 280 L 111.22 980 ")
}

<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>

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 更改SVG路径的d属性

1条答案

相关问题

热门标签

最新问答