扩展 SVG 路径答案

【问题标题】：Extend SVG path扩展 SVG 路径
【发布时间】：2012-05-21 16:46:57
【问题描述】：

在我的一个应用程序中，我正在使用以下代码创建 SVG 路径

var points="M1180,401 S1180,476 1030 476 L100, 476";
createPath(points, id, name);


   function createPath(points, id, nane) {

                var shape = document.createElementNS(svgNS, "path");
                shape.setAttributeNS(null, "d", points);
                shape.setAttributeNS(null, "class", "path");
                shape.setAttributeNS(null, "id", id);
                document.getElementById("holder").appendChild(shape);
                return id;
}

这将在我的 SVG 中创建一个路径（名为“holder”）。在按钮按下事件中，我需要延长它的长度。由于该 SVG 中有不止一个路径，所以我们不能拿它点。

请帮忙谢谢

【问题讨论】：

请解释一下“延长它的长度”是什么意思 - 在任何特定方向、变换/拉伸路径或其他什么？
嗨，现在我画线仍然 x 100 , y 476 ...我需要将它扩展到 x -250 , y 476

标签： javascript html svg jquery-svg

【解决方案1】：

如果您保持 id 唯一性，您可以使用它通过document.getElementById(id) 检索您的形状并从那里修改路径。

【讨论】：

我的 id 是唯一的，您能告诉我如何修改路径吗？
as points is points="M1180,401 S1180,476 1030 476 L100, 476"; 你可以简单地这样做：shape.setAttributeNS(null, "d", "M1180,401 S1180,476 1030 476 L250, 476"); 事实上，我自己的参数化设计项目 iscriptdesign.com 很大程度上依赖于这个特性，因为它允许通过重新计算其内容来修改 d 属性更改滑块或输入字段后。