Aurelia SVG sprite-间歇工作

在Aurelia中，我创建了一个自定义组件，用于显示使用

标记克隆的内联SVG。它似乎间歇性地工作，特别是在Aurelia对话框中使用时给我带来问题。有时图标加载到SVG阴影dom中；有时它只是空的。我的猜测是，它未能在完成加载DOM之前克隆SVG

HTML代码：

<template>

  <svg class="o-svg-icon" viewBox="0 0 64 64">
    <use xlink:href="target/_assets/img/svg/symbol/sprite.svg#${icon}"/>
  </svg>

</template>

SVG Sprite代码段：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <symbol id="call-inbound">
    <path d="M44.289 46.12c-.91-1.554-2.211-2.021-3.284-1.999-.79.015-10.582.01-10.582.01L19.321 25.083s4.388-7.504 5.152-8.826c.714-1.241.852-2.67.203-3.784-.642-1.101-5.576-9.564-6.024-10.346-.53-.929-1.903-1.538-3.112-.854-.882.499-5.441 3.252-6.008 3.47-.181.071-.253.121-.412.394-.822 1.407-3.442 5.967-4.092 7.091-.666 1.148-.667 2.269-.055 3.3 1.721 2.903 23.265 39.94 26.647 45.75.419.717 1.244 1.544 2.732 1.568 1.407.022 8.753-.024 10.346-.03.151-.002.453-.042.611-.135.174-.099 4.137-2.343 4.537-2.581.767-.453 1.565-1.756.81-3.054-.421-.724-5.654-9.707-6.367-10.926z"/>
    <path d="M62 21.769L55.402 10.34l-10.004 5.774-5.771-10-1.4.809-4.528 23.567 22.674 7.862 1.398-.807-5.773-10.001z"/>
  </symbol>

  <symbol id="call-outbound">
    <path d="M43.11 46.391c-.91-1.552-2.213-2.021-3.284-1.999-.791.017-10.583.011-10.583.011L18.14 25.355s4.388-7.503 5.152-8.826c.715-1.241.852-2.67.205-3.784-.643-1.101-5.577-9.564-6.025-10.346-.531-.929-1.904-1.538-3.113-.854-.882.499-5.441 3.252-6.008 3.47-.181.071-.253.121-.412.394-.822 1.407-3.442 5.967-4.092 7.091-.666 1.148-.667 2.269-.055 3.3 1.721 2.903 23.265 39.939 26.647 45.749.419.717 1.245 1.544 2.734 1.569 1.405.021 8.751-.025 10.344-.029.151-.004.455-.044.611-.137.174-.098 4.137-2.341 4.539-2.581.765-.453 1.563-1.754.808-3.052-.419-.726-5.654-9.708-6.365-10.928zM32.52 22.97l6.598 11.427 10.002-5.773 5.771 10.001 1.401-.811 4.527-23.566-22.673-7.862-1.397.807 5.772 10.002z"/>
  </symbol>

  <symbol id="check">
    <path d="M62.999 16.332L55.877 9.21 24.251 40.835 7.857 24.559.735 31.68l23.488 23.501 7.116-7.191z"/>
  </symbol>

</svg>

我认为这是一个很难回答的问题，因为它可能取决于许多变量。我的直觉是它与生命周期有关。如果我们能找到解决方案，我一定会在这里添加答案。对不起，我没有提到我们只在最新版本的Chrome上工作。

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <symbol id="call-inbound">
    <path d="M44.289 46.12c-.91-1.554-2.211-2.021-3.284-1.999-.79.015-10.582.01-10.582.01L19.321 25.083s4.388-7.504 5.152-8.826c.714-1.241.852-2.67.203-3.784-.642-1.101-5.576-9.564-6.024-10.346-.53-.929-1.903-1.538-3.112-.854-.882.499-5.441 3.252-6.008 3.47-.181.071-.253.121-.412.394-.822 1.407-3.442 5.967-4.092 7.091-.666 1.148-.667 2.269-.055 3.3 1.721 2.903 23.265 39.94 26.647 45.75.419.717 1.244 1.544 2.732 1.568 1.407.022 8.753-.024 10.346-.03.151-.002.453-.042.611-.135.174-.099 4.137-2.343 4.537-2.581.767-.453 1.565-1.756.81-3.054-.421-.724-5.654-9.707-6.367-10.926z"/>
    <path d="M62 21.769L55.402 10.34l-10.004 5.774-5.771-10-1.4.809-4.528 23.567 22.674 7.862 1.398-.807-5.773-10.001z"/>
  </symbol>

  <symbol id="call-outbound">
    <path d="M43.11 46.391c-.91-1.552-2.213-2.021-3.284-1.999-.791.017-10.583.011-10.583.011L18.14 25.355s4.388-7.503 5.152-8.826c.715-1.241.852-2.67.205-3.784-.643-1.101-5.577-9.564-6.025-10.346-.531-.929-1.904-1.538-3.113-.854-.882.499-5.441 3.252-6.008 3.47-.181.071-.253.121-.412.394-.822 1.407-3.442 5.967-4.092 7.091-.666 1.148-.667 2.269-.055 3.3 1.721 2.903 23.265 39.939 26.647 45.749.419.717 1.245 1.544 2.734 1.569 1.405.021 8.751-.025 10.344-.029.151-.004.455-.044.611-.137.174-.098 4.137-2.341 4.539-2.581.765-.453 1.563-1.754.808-3.052-.419-.726-5.654-9.708-6.365-10.928zM32.52 22.97l6.598 11.427 10.002-5.773 5.771 10.001 1.401-.811 4.527-23.566-22.673-7.862-1.397.807 5.772 10.002z"/>
  </symbol>

  <symbol id="check">
    <path d="M62.999 16.332L55.877 9.21 24.251 40.835 7.857 24.559.735 31.68l23.488 23.501 7.116-7.191z"/>
  </symbol>

</svg>