在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