title: XML SVG : Make coordinates of a Rect dynamic
body: <p>I'm creating custom dynamic SVG where I want to make the X and Y property of a rect element dynamic like below:</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-html lang-html prettyprint-override"><code>&lt;svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 110 40"&gt;
    &lt;defs&gt;
      &lt;ref id="abs" param="abs" default="5"/&gt;
      &lt;ref id="ord" param="ord" default="5"/&gt;
    &lt;/defs&gt;
    &lt;g&gt;
      &lt;rect x="url(#abs)" y="url(#ord)" width="25" height="25" fill="purple"/&gt;
    &lt;/g&gt;
    &lt;script type="text/ecmascript" xlink:href="https://dev.w3.org/SVG/modules/ref/master/ref2.js"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm calling my SVG into the webpage with that code :</p>
  <pre class="lang-html prettyprint-override"><code>  &lt;object type=&quot;image/svg+xml&quot; data=&quot;bidule.svg?abs=0&amp;ord=0&quot; id=&quot;svg&quot;&gt;&lt;/object&gt;
  </code></pre>
  <p>But i'm facing an issue with X and Y props, when I load it on chrome, the following error is triggered : <code>&lt;rect&gt; attribute x: Expected length, &quot;url(#abs)&quot;</code></p>
  <p>Nota : I know how to do that in JS SVG, but I must do it in &quot;native&quot; SVG because it will be embedded.</p>
  <p>What's the right method to do that?</p>