在Ember的链接中使用SVG形状链接：标记

Question

我正在将项目从HTML迁移到Ember。我正在使用覆盖背景jpeg图像的SVG图像地图。

当我在Ember中为SVG形状“按钮”创建“链接到：”链接时，Ember在链接中生成一个排除SVG形状的链接，并生成一个不链接任何东西的矩形。

<!-- the following link creates a link within a link that excludes the rectangle --> 
 
<a> 
 
{{ link-to 'ember link' 'ember-link' }} 
 
<rect id="linkToEmberProblem" x="47" y="460" width="182" height="100"/> 
 
</a>

其输出到这个浏览器：

<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>

我想我明白为什么，但将Ember的内部SVG形状链接到：链接句柄创建一个构建错误：

是否有保存灰烬应用程序中的SVG形状链接的手段？

下面是页面的全码：

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

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

 
<!-- be sure to use fill=transparent in the svg declaration to avoid the black hole boxes over link areas! 
 
--> 
 
\t <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> 
 
\t \t 
 
\t \t <image width="1200" height="800" xlink:href="assets/img/city.jpg"/> 
 
\t \t 
 
\t \t <!-- the following link creates a link within a link that excludes the rectangle --> 
 
\t \t <a> 
 
\t \t \t {{ link-to 'ember link' 'ember-link' }} 
 
\t \t \t <rect id="linkToEmberProblem" x="47" y="460" width="182" height="100"/> 
 
\t \t </a> \t \t 
 
\t \t 
 
\t </svg> 
 
</div>

，其输出：

Answer 1

您想使用块形式的link-to帮手。 https://guides.emberjs.com/v2.7.0/templates/links/

{{#link-to 'ember-link' }} 
    <rect id="linkToEmberProblem" x="47" y="460" width="182" height="100"/> 
{{/link-to}} 

这是一个工作示例。 https://ember-twiddle.com/daf349bf31ce68baa7ec9bd89608e85a?openFiles=templates.application.hbs%2C