使用自定义元素时，Aurelia 生成的 SVG 元素不可见

【问题标题】：Aurelia generated SVG elements are invisible when using custom elements使用自定义元素时，Aurelia 生成的 SVG 元素不可见
【发布时间】：2017-08-27 22:21:26
【问题描述】：

为什么 SVG 中的自定义元素不可见？

使用 Aurelia 编写 Svg 类似于编写 html。您必须确保任何自定义元素都是无容器实现的（通过使用 `@containerless' 属性装饰 ViewModel 或向自定义元素标签添加属性 'containerless'。SVG 对未在具有错误值类型的规范和属性。

即使您已将它们设为无容器，自定义元素仍有可能不显示，即使它们已添加到 DOM。

Checkout this GistRun。您会期望 DOM 中存在两个白色矩形，位于其他元素上方。但它们是不可见的。

【问题讨论】：

标签： svg aurelia aurelia-templating

【解决方案1】：

元素不显示的原因是因为 Aurelia 使用 cmets 来跟踪元素位置 ()。您可以通过将元素包装在 SVG 标记中来避免此问题：

<template>
   <svg>
      ...
   </svg>
</template>

See this Gistrun 获取工作结果。

编辑：如果您不希望内部元素被 SVG 元素剪切，请务必添加属性 overflow="visible"：

<template>
   <svg overflow="visible">
       ...
   </svg>
</template>

Aurelia 备忘单中的更多信息： http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/9

【讨论】：