改变SVG路径的X和Y坐标

Question

如何在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>

- Reece

---

读取d属性，解析M后面的两个值。不过有更简单的方法。 - Robert Longson

抱歉，我不明白你的意思。你有一个例子吗？ - Reece

Answer 1

使用JQuery将path属性更改为newPath，可使用.attr("d", 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 可点击并选择其中所有子路径。如果您想选择特定的路径，可以为其添加一个 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>

- user2314737

---

谢谢，这正是我所要求的，但我不明白其中几个部分。这行代码具体是做什么的？path = "M20" + path.slice(2); - Reece

我该如何选择不同的坐标？比如说，我想将第一行的L30 4更改为L30 30。 - Reece

@Reece，他们只是在进行字符串操作。如果你想了解 slice() 函数对字符串的操作，可以阅读文档。如果你想操作其他坐标，那么你可以使用许多不同的 Javascript 字符串操作函数。 - Paul LeBeau

你也可以通过 <path> 元素的 pathSegList 属性 访问 d 属性的路径段。但请注意，某些浏览器可能需要使用 polyfill。 - Paul LeBeau