在 Ember 的 link-to: 标记中使用 SVG 形状 link

Question

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

当我在 Ember 中为 SVG 形状创建 "link-to:" links 时 "buttons," Ember 在 link 排除 SVG 形状并生成一个不 link 任何东西的矩形。

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

我想我明白为什么，但是将 SVG 形状放在 Ember 的 link-to: link 把手中会产生构建错误：

有没有办法在 Ember 应用程序中保留 SVG 形状 links？

下面是页面的完整代码：

<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://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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>
   {{ link-to 'ember link' 'ember-link' }}
   <rect id="linkToEmberProblem" x="47" y="460" width="182" height="100"/>
  </a>  
  
 </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

在 Ember 的 link-to: 标记中使用 SVG 形状 link

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

svg

ember.js

imagemap