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

Question

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

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

即使你已经注意使它们无容器，即使它们被添加到DOM中，自定义元素仍然可能无法显示。

Checkout this GistRun。您可以预期DOM中存在两个白色矩形，位于其他元素之上。但它们并不可见。

Answer 1

元素未显示的原因是Aurelia用于跟踪元素位置的注释（<!--<view>-->）。您可以通过将元素包装在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