title: Set attribute of basic SVG element with JavaScript
body: <p>First, below is the desired result without any JavaScript added</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body { display: flex; justify-content: center; align-items: center; }
  svg { width: 12.5rem; height: 6rem; }
  path { fill: none; stroke: #444; stroke-width: 5px; }
  circle { opacity: 0.75; fill: #0dd; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
    &lt;path
      d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" 
    /&gt;
  
    &lt;circle r='10'&gt;
      &lt;animateMotion 
        dur="5s" repeatCount="indefinite"
        path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" 
       /&gt;
    &lt;/circle&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Notice the <code>animateMotion</code> element and values of the <code>path</code> attribute. Everything works perfectly in the snippet above.</p>
  <p>In the snippet below, however, we don't have the <code>path</code> attribute yet added on the <code>animateMotion</code> element so we're trying to insert it with JavaScript. In the completed program the <code>path</code> attribute will be filled with dynamic values.</p>
  <p>Why doesn't the <code>animateMotion</code> element work here like in the first snippet when the DOM structure is identical?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let animateMotion = document.querySelector( `animateMotion` );
  
  animateMotion.setAttributeNS(
    `http://www.w3.org/2000/svg`, `path`, 
    `M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z`
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body { display: flex; justify-content: center; align-items: center; }
  svg { width: 12.5rem; height: 6rem; }
  path { fill: none; stroke: #444; stroke-width: 5px; }
  circle { opacity: 0.75; fill: #0dd; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
    &lt;path
      d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" 
    /&gt;
  
    &lt;circle r='10'&gt;
      &lt;animateMotion 
        dur="5s" repeatCount="indefinite"
       /&gt;
    &lt;/circle&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Upon inspection we can see the browser appears to have correctly added the <code>path</code> attribute exactly as it appears in the HTML of the first snippet:</p>
  <p><a href="https://i.stack.imgur.com/9pZPi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9pZPi.png" alt="enter image description here" /></a></p>