更改 SVG 路径的 X 和 Y 坐标答案

【问题标题】：Changing the X and Y coordinates of a SVG path更改 SVG 路径的 X 和 Y 坐标
【发布时间】：2017-06-23 08:21:22
【问题描述】：

如何在 jQuery 中获取路径的 X 和 Y 坐标，然后更改它们？我希望能够在点击时为我的图标设置动画。我知道还有其他方法，但想使用 jQuery

<svg class="path" style="height: 32px; width: 32px;">
  <g style="stroke: #ff6633; stroke-width: 4px;" fill="none" stroke-linecap="round">
    <path d="M2 4 L30 4" />
    <path d="M2 16 L30 16" />
    <path d="M2 28 L30 28" />
  </g>
</svg>

【问题讨论】：

读取 d 属性，解析 M 之后的两个值。不过还有更简单的方法。
对不起，我不明白你的意思。你有例子吗？

标签： javascript jquery html svg

【解决方案1】：

使用带有 JQuery 的 .attr("d", newPath); 将 path 属性更改为 newPath。

这是一个示例，其中每个路径都附加了一个click 事件。您可以使用任何字符串操作方法来更改路径中的属性d。

操纵单一路径

// click event on a path element of the SVG
$('path').click(function() {
  var path = $(this).attr("d");
  // just as an example, substitute the first two characters in d ("M2") with "M20"
  path = "M20" + path.slice(2); // here you manipulate the path as a string
  console.log(path); // check new path in the console
  $(this).attr("d", path);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg class="path" style="height: 32px; width: 32px;">
  <g style="stroke: #ff6633; stroke-width: 4px;" fill="none" stroke-linecap="round">
    <path d="M2 4 L30 4" />
    <path d="M2 16 L30 16" />
    <path d="M2 28 L30 28" />
  </g>
</svg>

更改所有路径

此示例向您展示如何使svg 可点击并选择svg 中的所有子路径。如果你想选择一个特定的路径，你可以给它添加一个id。

// select the svg element
$('svg').click(function() {
  $(this).find("path").each(function(index) {
    var d = $(this).attr("d");
    d = "M" + 10 * index + d.slice(2); // manipulate path 
    $(this).attr("d", d);
  })
});

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

<svg class="path" style="height: 32px; width: 32px;">
  <g style="stroke: #ff6633; stroke-width: 4px;" fill="none" stroke-linecap="round">
    <path d="M2 4 L30 4" />
    <path d="M2 16 L30 16" />
    <path d="M2 28 L30 28" />
  </g>
</svg>

【讨论】：

谢谢，这正是我所要求的，但我不明白一些事情。这条线到底在做什么？ path = "M20" + path.slice(2);
如何选择不同的坐标？假设我想将第一行的 L30 4 更改为 L30 30
@Reece 他们只是在进行字符串操作。如果你想了解slice() 函数对字符串的作用，read the documentation。如果你想操作其他坐标，那么你可以在Javascript中使用许多不同的字符串操作函数。
您还可以使用<path> 元素的pathSegList property 访问d 属性的路径段。但请注意，您可能必须使用polyfill in some browsers。