Using a SVG shape link in Ember's link-to: markup

I am migrating a project from HTML to Ember. I am using an SVG imagemap overlaying a background jpeg image.

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.

<!-- the following link creates a link within a link that excludes the rectangle -->
<a>

<rect id="linkToEmberProblem" x="47" y="460" width="182" height="100"/>
</a>

which outputs to this in the browser:

<a>
  <a id="ember373" href="/ember-link" class="ember-view">ember link</a>
  <rect id="linkToEmberProblem" x="47" y="460" width="182" height="100"></rect>
</a>

I think I understand why, however placing the SVG shape inside Ember's link-to: link handlebars creates a build error:

Is there a means to preserve SVG shape links within an Ember app?

Below is the full code of the page:

<style>
        /* show location of link */
        
        #linkToEmberProblem {
                fill: rgba(224,64,80, .8);
        }
        
</style>

<div class="canvas">
        <h2>City</h2>

<!-- be sure to use fill=transparent in the svg declaration to avoid the black hole boxes over link areas!
-->
        <svg id="city" data-name="city" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw" viewBox="0 0 916.8 711.36" fill=transparent>
                
                <image width="1200" height="800" xlink:href="assets/img/city.jpg"/>
                
                <!-- the following link creates a link within a link that excludes the rectangle -->
                <a>
                        
                        <rect id="linkToEmberProblem" x="47" y="460" width="182" height="100"/>
                </a>              
                
        </svg>
</div>

and its output: