在Ember的link-to：markup中使用SVG形状链接

Question

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

当我在Ember中为SVG形状“按钮”创建“link-to：”链接时，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>

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

是否有办法在Ember应用程序中保留SVG形状链接？

以下是该页面的完整代码：

<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