4

How can I get the X and Y coordinates of a path in jQuery and then change them? I wanting to be able to animate my icon on click. I know there are other ways but would like to use 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
  • 2,581
  • 10
  • 42
  • 90

1 Answers1

2

Change the path attribute to newPath using .attr("d", newPath); with JQuery.

Here's and example where each single path has a click event attached to it. You can use any string manipulation method for changing the attribute d in the path.

Manipulate single path

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

Change all paths

This example shows you how to make the svg clickable and select all children paths in the svg. If you want to select a specific path, you can add an id to it.

// 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
  • 27,088
  • 20
  • 102
  • 114
  • Thanks this is exactly what I asked for but I don't understand a couple things. What is this line doing exactly? path = "M20" + path.slice(2); – Reece Jun 23 '17 at 09:05
  • And how can I select different coordinates? Say I want to change L30 4 on the first line to L30 30 – Reece Jun 23 '17 at 09:07
  • @Reece They are just doing string manipulation. If you want to understand what the `slice()` function does to a string, [read the documentation](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/slice). If you want to manipulate other coordinates, then you can use many and various string manipulation functions in Javascript. – Paul LeBeau Jun 23 '17 at 10:56
  • You can also access the path segments of the `d` attribute using the [`pathSegList` property](https://www.w3.org/TR/SVG/single-page.html#paths-InterfaceSVGAnimatedPathData) of the `` element. But note that you may have to use a [polyfill in some browsers](https://stackoverflow.com/questions/34352624/alternative-for-deprecated-svg-pathseglist). – Paul LeBeau Jun 23 '17 at 11:04