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

Question

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

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

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

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

score 0 · Accepted Answer

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

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

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

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

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

1 回答 1