带<use>的SVG图标：悬停在Chrome中无法使用外部加载

Question

要非常非常清楚：

如果您复制粘贴此代码，它将在Chrome浏览器中运行。当您放置包含嵌套<symbol>的map.svg并使用外部加载访问资源时，问题在于：

<svg role="img" title="Python" class="icon">
    <use xlink:href="public/img/map.svg#python" />
</svg>

以下是<section>

中的代码

<div class="row">
  <svg role="img" title="Python" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#python" /></svg>
  <svg role="img" title="C" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#c" /></svg>
  <svg role="img" title="C++" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#cpp" /></svg>
  <svg role="img" title="Swift" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#swift" /></svg>
</div>

如果您注意到，我正在为每个SVG路径引用一个<symbol id="relevant-id">的SVG映射文件。我能够得到

.icon:hover {
  fill: red;
}

正如您在Chrome中所期望的那样工作，但我在index.html的底部引用了SVG地图，而不是在单独的目录中引用。因此，在努力解决此问题时，请务必确保 xlink：href 指向正确的位置。

以下是SVG地图：

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
    <symbol id="c" viewBox="0 0 1000 1000">
        <title>C</title>
        <path d="M639 579.3c-5.5-3.2-11.1-6.4-16.7-9.6-4.5-2.5-5.8-2.1-8.4 2-14.3 22.2-32.7 39.8-57 50.6-17 7.5-34.9 10.7-53.4 11-20.6.3-40.5-3.4-59-12.4-23-11.1-40.6-28.4-54.5-49.4-.7-1-.9-2.4-1.5-3.6-.7-1.5-1.4-3.1-2.2-4.6-2.9-5.2-6.4-10.1-8.5-15.7-8.1-21.3-9.9-43.4-6.8-65.9 4.3-31.2 17.8-58 41.1-79.3 32.4-29.5 71-39.6 114-33 35.3 5.4 63 23.4 83.3 52.8 2.4 3.5 4.7 7.2 7.1 10.9 39.1-22.6 78-45.2 117.1-67.8-2.7-3.6-5.2-7-7.7-10.4-13.3-18.9-27.9-36.3-44.7-52.1-30.9-29-66.6-49.8-107.8-60.5-39.3-10.2-78.8-10.6-118.6-4-54.1 8.9-100.4 33.4-139.3 71.9-31.5 31.2-53.9 68.2-67.5 110.4-10.7 33.6-14.6 68.2-11.2 103.3 2.1 23 7.4 45.4 15.3 67.1 5.5 15.2 11.4 30.3 19.9 44.1 18 29.2 40.3 54.9 67.4 76.1 43.9 34.3 93.8 52.7 149.3 55.6 33.1 1.7 65.6-2.6 97.1-13 56-18.5 101.6-51.3 135.2-100.1 4.2-6.1 7.9-12.6 12-19.1-1.9-1.5-3.4-3.1-5.1-4.1-30.1-17-59.5-34.1-88.9-51.2z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zM918 691.4c0 11.9-2.1 23.5-6.7 34.5-8.1 19.3-22.2 33.2-40 43.6-97.7 56.6-195.4 113.2-293.2 169.7-12.9 7.4-25.8 14.8-39.1 21.4-14.6 7.2-30.1 9.6-46.4 7.8-14.6-1.6-27.9-6.8-40.5-14.1C378.1 911.5 304 868.9 230 826c-35.2-20.5-70.7-40.8-105.4-62-25.7-15.7-38.6-39.5-38.8-69.8-.1-15.7-.1-31.3-.1-46.9 0-.9-.3-1.8-.4-2.7V313.5c.1-1.1.4-2.2.4-3.2-.1-7.7.2-15.5 1.9-23.1 5-22 17.7-38.7 36.4-50.6 13.9-8.8 28.1-17 42.3-25.2 56.7-32.7 113.6-65.4 170.4-98.1 41-23.5 81.7-47.3 122.9-70.5 25.8-14.6 52.6-15.7 79.4-2.9 11.2 5.3 22 11.8 32.8 18.1 58.5 33.7 117.1 67.7 175.6 101.5 40.6 23.5 81.1 47 121.6 70.6 9.8 5.7 19.2 12.2 26.9 20.8 15.4 16.8 22 36.9 22 59.3.1 126.9.1 254.1.1 381.2z"/>
    </symbol>

    <symbol id="cpp" viewBox="0 0 1000 1000">
        <title>C++</title>
        <path d="M639 579.3c-5.5-3.2-11.1-6.4-16.7-9.6-4.5-2.5-5.8-2.1-8.4 2-14.3 22.2-32.7 39.8-57 50.6-17 7.5-34.9 10.7-53.4 11-20.6.3-40.5-3.4-59-12.4-23-11.1-40.6-28.4-54.5-49.4-.7-1-.9-2.4-1.5-3.6-.7-1.5-1.4-3.1-2.2-4.6-2.9-5.2-6.4-10.1-8.5-15.7-8.1-21.3-9.9-43.4-6.8-65.9 4.3-31.2 17.8-58 41.1-79.3 32.4-29.5 71-39.6 114-33 35.3 5.4 63 23.4 83.3 52.8 2.4 3.5 4.7 7.2 7.1 10.9 39.1-22.6 78-45.2 117.1-67.8-2.7-3.6-5.2-7-7.7-10.4-13.3-18.9-27.9-36.3-44.7-52.1-30.9-29-66.6-49.8-107.8-60.5-39.3-10.2-78.8-10.6-118.6-4-54.1 8.9-100.4 33.4-139.3 71.9-31.5 31.2-53.9 68.2-67.5 110.4-10.7 33.6-14.6 68.2-11.2 103.3 2.1 23 7.4 45.4 15.3 67.1 5.5 15.2 11.4 30.3 19.9 44.1 18 29.2 40.3 54.9 67.4 76.1 43.9 34.3 93.8 52.7 149.3 55.6 33.1 1.7 65.6-2.6 97.1-13 56-18.5 101.6-51.3 135.2-100.1 4.2-6.1 7.9-12.6 12-19.1-1.9-1.5-3.4-3.1-5.1-4.1-30.1-17-59.5-34.1-88.9-51.2z"/><path d="M736.5 453h-30.4v32.4h-32.4v30.2h32.5V548h30.4v-32.3h32.2v-30.2h-32.3V453z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zM918 691.4c0 11.9-2.1 23.5-6.7 34.5-8.1 19.3-22.2 33.2-40 43.6-97.7 56.6-195.4 113.2-293.2 169.7-12.9 7.4-25.8 14.8-39.1 21.4-14.6 7.2-30.1 9.6-46.4 7.8-14.6-1.6-27.9-6.8-40.5-14.1C378.1 911.5 304 868.9 230 826c-35.2-20.5-70.7-40.8-105.4-62-25.7-15.7-38.6-39.5-38.8-69.8-.1-15.7-.1-31.3-.1-46.9 0-.9-.3-1.8-.4-2.7V313.5c.1-1.1.4-2.2.4-3.2-.1-7.7.2-15.5 1.9-23.1 5-22 17.7-38.7 36.4-50.6 13.9-8.8 28.1-17 42.3-25.2 56.7-32.7 113.6-65.4 170.4-98.1 41-23.5 81.7-47.3 122.9-70.5 25.8-14.6 52.6-15.7 79.4-2.9 11.2 5.3 22 11.8 32.8 18.1 58.5 33.7 117.1 67.7 175.6 101.5 40.6 23.5 81.1 47 121.6 70.6 9.8 5.7 19.2 12.2 26.9 20.8 15.4 16.8 22 36.9 22 59.3.1 126.9.1 254.1.1 381.2z"/><path d="M849.9 453.1h-30.1v32.4h-32.4v30.1h32.5V548h30.2v-32.4h32.4v-30.3H850c-.1-10.9-.1-21.5-.1-32.2z"/>
    </symbol>

    <symbol id="python" viewBox="0 0 1000 1000">
        <title>Python</title>
        <path d="M619 858.9c20.7 0 37.3-16.7 37.3-37.2 0-20.5-16.8-37.1-37.2-37.1-20.6 0-37.1 16.6-37.1 37.1-.1 20.7 16.4 37.2 37 37.2zM384.8 140.4c-20.8 0-37.3 16.5-37.3 37.1s16.6 37.2 37.1 37.2c20.6 0 37.2-16.6 37.3-37 .1-20.6-16.5-37.3-37.1-37.3z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zM268.3 607.5c-.3 33.2-.1 66.5 0 99.8 0 1.9-.4 2.3-2.3 2.3-23.1-.1-46.1-.1-69.2 0-13.2.1-25.6-2.9-37.4-8.3-19.7-8.9-34.8-23.1-46.9-40.8-12.9-18.9-21-39.9-26.7-61.9-7.9-31-10.6-62.7-11-94.6v-10.2c0-3.6.1-7.2.3-10.8.5-17.2 2-34.2 4.8-51.2 3.1-18.7 7.9-36.9 15.4-54.4 8.8-20.8 20.8-39.4 38.1-54.1 18.1-15.5 38.9-24.5 62.4-27.4 7.5-.9 15-.5 22.5-.4 19.8.1 39.6 0 59.3 0H500c2 0 2.7-.5 2.6-2.6-.1-8 0-16.1-.1-24 0-3.1.3-2.7-2.7-2.7H298c-1.9 0-2.5-.4-2.5-2.4v-55.7c0-12.9.1-25.7-.1-38.5-.1-5.1.1-10.1 1.3-15.2 3.4-14.4 11.4-25.9 22.3-35.6 11.6-10.5 25.3-17.9 39.9-23.6 21.8-8.5 44.5-13.3 67.6-16.3 21-2.7 42.1-3.8 63.2-4.2h19.6c8.8.4 17.7.7 26.5 1.1 7.7.4 15.4 1.3 23 2.1 4 .4 8 .8 11.9 1.4 5.6.8 11.2 1.8 16.9 2.9 9.8 1.9 19.5 4 29 6.9 9.6 2.9 19.1 6.3 28.2 10.5 13 6.1 25 13.6 35.4 23.3 12.3 11.4 21.2 25.2 25.5 41.7 2.2 8.3 2.2 16.8 2.1 25.3-.2 61.1-.1 122.4-.1 183.5 0 9.8-.6 19.7-2.6 29.4-5.4 27-19.1 48.6-42.4 63.6-21.6 13.9-45.6 20.2-71 20.3-67.5.3-135 .1-202.5.1-12.8 0-25.3.9-37.8 3.9-25.7 6.2-46.7 19.5-61.4 41.7-15 22.8-21.5 48.1-21.7 75.1zm657.4-51.1c-.1.5-.3.9-.4 1.4-1.5 11.1-3.6 22.2-6.4 33.1-6.1 23.6-15.2 45.9-30 65.4-19.4 25.4-44.7 41.2-76.3 46.4-8.3 1.4-16.7 1.1-25 1.1-55.5-.2-111-.1-166.6-.1-39.1 0-78.1 0-117.2-.1-2.2 0-2.7.6-2.7 2.7.1 7.8.1 15.6.1 23.4 0 3.2 0 3.2 3.3 3.2 67 0 134 0 201-.1 2 0 2.6.5 2.6 2.5-.1 8.5.1 17.2.1 25.7.1 24.1.2 48.2.2 72.3 0 2.8-.2 5.6-.7 8.4-2.5 13.3-9 24.3-18.3 33.9-11.8 12.3-26.4 20.7-42.1 27.1-25.5 10.4-52.2 15.4-79.4 18.4-13.8 1.5-27.5 2.3-41.4 2.7-24.1.7-48.2.3-72.2-1.8-10.6-.9-21.3-2.2-31.8-4-14.1-2.4-27.9-5.6-41.5-10.1-19.4-6.4-37.7-15-53.3-28.3-14.8-12.6-25.4-27.7-30-46.8-2-8.1-1.8-16.4-1.7-24.7.2-60.9.1-122 .1-182.9 0-10.8.7-21.5 3.1-32.1 6.5-28.9 22.6-50.7 48.7-64.9 20.1-10.9 41.8-16.2 64.5-16.3 67.8-.2 135.5-.1 203.3-.1 13.5 0 26.7-1.3 39.8-4.8 21.3-5.7 39.4-16.6 53.2-33.9 18.2-22.9 26.3-49.6 26.9-78.4.7-34.3.2-68.7.1-102.9 0-2.1.5-2.6 2.6-2.6 23.1.1 46.2.1 69.4 0 11.7 0 22.9 2.5 33.7 6.9 19.8 8.1 35.2 21.7 47.8 38.8 11.3 15.5 18.8 32.8 24.9 50.9 4.5 13.6 7.5 27.6 9.8 41.8.7 4.4 1.4 8.7 2.1 13.2-.3 38.7-.3 77.2-.3 115.6z"/>
    </symbol>

    <symbol id="swift" viewBox="0 0 1000 1000">
        <title>Swift</title>
        <path d="M499 487.2h.3c-.1-.1-.2-.1-.2-.2-.1 0-.1.1-.1.2z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zm20.8 854c-.7 5.2-1.6 10.4-3.8 15.3-.9 1.9-1.7 4.3-4.1 4.4-2.4.1-3-2.3-3.9-4-9.4-18-21.2-34-37.3-46.6-15.5-12-33-19-52.4-21.6-19.3-2.5-38.2-.5-57 3.7-16.1 3.6-31.6 8.9-46.6 15.6-6.7 2.9-13 6.8-19.5 10.1-22.4 11.1-45.7 19.5-70 25.4-16.6 4-33.2 7-50.2 8.8-20.4 2.1-40.8 2.7-61.2 1.9-26.8-1.1-53.3-4.6-79.5-10.3-40.8-8.8-79.8-22.7-117.4-40.6-39.5-18.8-76.2-42-110.4-69.2-14-11-27.3-22.8-40.3-35-6.3-5.9-12.6-12-18.5-18.3-26.7-28-50.5-58-71.2-90.7-.3-.5-.5-1-.8-1.5l.2-.2c10 8 20.3 15.6 31 22.6 16.3 10.5 33.1 19.8 50.4 28.6 9.2 4.7 18.7 9 28.1 13.3 7.6 3.4 15.4 6.4 23.2 9.4 9.5 3.7 19.3 7.1 29 10.2 10.7 3.4 21.7 6.4 32.6 9.1 9 2.2 18.1 4.1 27.1 5.9 5.6 1.1 11.2 2 17 2.6 4.9.5 9.7 1.7 14.6 2.1 3.5.3 7.1.6 10.6 1 4.9.5 9.9 1 14.9 1.1 9.6.2 19.4.7 29 .4 12.4-.3 24.9-1 37.2-2.4 13.8-1.6 27.4-3.9 41-7 32.8-7.6 63.8-19.8 92.6-37.1.7-.4 1.3-.8 2-1.2.2-.1.3-.3.6-.5-4-3.1-8-6.2-12-9.4-7.8-6.2-15.7-12.6-23.5-18.9-1.6-1.3-3.1-2.6-4.7-3.9-11.4-9.2-22.5-19-33.5-28.7-39.8-35.1-77.6-72.4-114-111-7.8-8.3-15.6-16.6-23.3-25-7.6-8.3-15.3-16.9-22.8-25.3-6-6.7-11.9-13.6-17.8-20.4-28.3-33-56-66.5-82.9-100.7-6.3-8-12.3-16.2-18.9-24-5.5-6.6-11.6-12.8-16.9-19.6-10.8-14-20.3-28.9-30-43.6-.1-.2-.1-.4-.2-.5 2 .9 3.4 2.6 4.9 4.1 34.4 31 70.2 60.5 106.4 89.4 38.7 30.7 78.1 60.5 118 89.6 9 6.6 18.2 13.2 27.4 19.6 5.3 3.8 10.6 7.6 16.1 11.3 12.8 8.6 25.6 17.2 38.5 25.8 9.5 6.3 19.2 12.3 29 18.2.5.3.9.9 1.6.6-3.5-3.9-7-7.7-10.6-11.5-15.1-16.2-29.7-32.6-44.3-49.4-27-31.1-53.2-63-78.7-95.4-35.7-45.6-70.5-91.9-103.2-139.8-1-1.5-1.9-3-2.8-4.5l.3-.3c2.9 2.9 5.9 5.7 8.8 8.6 33.8 33.7 68.6 66.6 104.3 98.4 36.5 32.5 73.9 64.1 112.2 94.5 22.3 17.7 44.8 34.8 67.6 51.9 12.4 9.4 25.2 18.6 37.9 27.6 9.6 6.8 19.4 13.7 29.2 20.3 17 11.3 33.9 22.6 51.5 33 1.1.7 1.4.6 1.9-.6 7.3-19 12.8-38.5 16.5-58.4 1.8-9.7 3.2-19.5 4.1-29.3 1.7-18.2 2.1-36.3 1.1-54.5-3.7-68.7-24.2-132.5-56-193.1-12.1-23.2-26-45.3-41.4-66.5-.4-.5-.7-1-1.2-1.7.9-.2 1.4.4 1.9.7 36.6 22.5 70.5 48.5 101.5 78.2 50 48 90.8 102.7 120.8 165.4 5.5 11.4 10.6 23.1 15.1 35 2.9 7.9 5.7 15.9 8.4 23.8 6 17.8 10.6 35.9 14.2 54.4 3.1 16.3 5.2 32.7 6.3 49.3 1.1 16.8 1.1 33.4-.1 50.2-1.1 15.4-3.2 30.5-6.5 45.6-.6 2.5-.8 5.2-2.1 7.5 0 2.9-1 5.5-1.8 8.2-1.1 4.1-1.8 8.3-3.5 12.2-.3.8.1 1.1.5 1.6 24.4 30.2 43.3 63.6 55.8 100.3 6.6 19.5 11.2 39.6 13.6 60 1.8 15.3 2.3 30.4.3 45.4z"/>
    </symbol>
</svg>

您需要使用它的CSS：

Bootstrap 3.3.7 CDN：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

.icon {
  fill: black;
}

最后，这是一个CodePen： https://codepen.io/kylemh/pen/ZeBKYG

重新审核，CODEPEN工作，因为SVG地图是在INDEX.HTML

Answer 1

我在Mac上的Chrome中查看过，并没有看到任何奇怪的行为。

您确定没有任何扩展干扰吗？