title: Using a SVG shape link in Ember's link-to: markup
body: <p>I am migrating a project from HTML to Ember. I am using an SVG imagemap overlaying a background jpeg image.</p>
  
  <p>When I create "link-to:" links in Ember for the SVG shape "buttons," Ember generates a link within a link that excludes the SVG shape and produces a rectangle that doesn't link to anything.</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;!-- the following link creates a link within a link that excludes the rectangle --&gt;
  &lt;a&gt;
  {{ link-to 'ember link' 'ember-link' }}
  &lt;rect id="linkToEmberProblem" x="47" y="460" width="182" height="100"/&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>which outputs to this in the browser:</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;a&gt;
    &lt;a id="ember373" href="/ember-link" class="ember-view"&gt;ember link&lt;/a&gt;
    &lt;rect id="linkToEmberProblem" x="47" y="460" width="182" height="100"&gt;&lt;/rect&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I think I understand why, however placing the SVG shape inside Ember's link-to: link handlebars creates a build error:
      <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  </div>
  </div>
  </p>
  
  <p>Is there a means to preserve SVG shape links within an Ember app?</p>
  
  <p>Below is the full code of the page:</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;style&gt;
   /* show location of link */
   
   #linkToEmberProblem {
    fill: rgba(224,64,80, .8);
   }
   
  &lt;/style&gt;
  
  &lt;div class="canvas"&gt;
   &lt;h2&gt;City&lt;/h2&gt;
  
  &lt;!-- be sure to use fill=transparent in the svg declaration to avoid the black hole boxes over link areas!
  --&gt;
   &lt;svg id="city" data-name="city" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 916.8 711.36" fill=transparent&gt;
    
    &lt;image width="1200" height="800" xlink:href="assets/img/city.jpg"/&gt;
    
    &lt;!-- the following link creates a link within a link that excludes the rectangle --&gt;
    &lt;a&gt;
     {{ link-to 'ember link' 'ember-link' }}
     &lt;rect id="linkToEmberProblem" x="47" y="460" width="182" height="100"/&gt;
    &lt;/a&gt;  
    
   &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and its output:
  <a href="https://i.stack.imgur.com/nBhYZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nBhYZ.jpg" alt="enter image description here"></a></p>