在Ember的link-to:标记中使用SVG形状链接
在Ember的link-to:标记中使用SVG形状链接
提问于 2016-09-04 06:37:36
我正在将一个项目从HTML迁移到Ember。我使用的是一个SVG图像地图，覆盖了一个背景jpeg图像。
当我为SVG形状“按钮”创建" link - to :“links in Ember时，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 handlebar中会产生一个构建错误：
有没有办法在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>
及其输出：
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-04 06:46:31
您希望对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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39311922
复制相关文章
相似问题
腾讯云开发者
