SVG: add animate element to a path element

Question

I have the following path element in my html:

<path fill="#edf1f2" stroke="#ff8d35" d="M236,-8C236,-8 336,-8 336,-8 342,-8 348,-14 348,-20 348,-20 348,-60 348,-60 348,-66 342,-72 336,-72 336,-72 236,-72 236,-72 230,-72 224,-66 224,-60 224,-60 224,-20 224,-20 224,-14 230,-8 236,-8">
</path>

Now I want to add programmatically (via Javascript) the following element in the path element:

<animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="3"></animate>

So the result would look like this:

<path fill="#edf1f2" stroke="#ff8d35" d="M236,-8C236,-8 336,-8 336,-8 342,-8 348,-14 348,-20 348,-20 348,-60 348,-60 348,-66 342,-72 336,-72 336,-72 236,-72 236,-72 230,-72 224,-66 224,-60 224,-60 224,-20 224,-20 224,-14 230,-8 236,-8">
<animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="3"></animate></path>

How can I accomplish this? I want to do this via Javascript or JQuery, but no external library like D3 lib

UPDATE Here is the code that I have tried with append but it does not work:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("#1").children("path").append('<animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="3"></animate>')
});
</script>
</head>

<body class="descendants">
  <g id="1">
  <svg width="320" height="320" viewBox="0 0 320 320">
<path
            id="path1:0" fill="#edf1f2" stroke="#ff8d35"
            d="M160,100 Q200,100,200,300 Q100,300,100,200 Z">
 </svg>
  </g>
</body>
</html>

I have just a reference to the g element, so I am using $('#1').children to find the path element.

just to get this out of the way, do you mean this:`$('path').append('');` — Scaramouche, Mar 12 '18 at 19:51
I am not sure, but I think `append` does not add it as a child. Does it? — Code Pope, Mar 12 '18 at 19:54
yeap, sure does, and `after` adds it as a sibling. One thing, though, I tried it with `$('path#path1:0")` using the `path1:0` id, and *that* way it didn't work, but just `$('path')` worked in my tests — Scaramouche, Mar 12 '18 at 19:55
@J.M.Echevarría I have tried it in my code but it does not work. I have updated my question and inserted what I have implemented. Can you see the problem in my code? — Code Pope, Mar 12 '18 at 20:23
first: I don't see the ending tag for path: ``, check that out. Second: `.children()` will get you as far as **1** level down the DOM, in other words `.children('path')` is returning `null` because `` is not its *child*, it is its *grandchild* (` — Scaramouche, Mar 12 '18 at 20:30
Also I think I tried using just a number as an ID value once and it was kinda quirky, maybe it is nothing, just check that out too — Scaramouche, Mar 12 '18 at 20:31
Yes, thanks that was the bug. I used `children` incorrectly. Just a question: `$("#1")` searches for any element with `id="1"`. Is there a way to use `$` but to search for `g` elements with `id="1"`? — Code Pope, Mar 12 '18 at 20:36

SVG: add animate element to a path element

0 Answers0