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

Question

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

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

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

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

Answer 1

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

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

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

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

Aurelia generated SVG elements are invisible when using custom elements