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

Question

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

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

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

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

Answer 1

元素不显示的原因是因为Aurelia用来跟踪元素位置的注释(<!--<view>-->(。您可以通过将元素包装在 SVG 标签中来避免此问题：

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

请参阅此 Gistrun 以获取工作结果。

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

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

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