无法通过ID获取外部svg元素

Question

我已经生成了一个svg spritesheet：

<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 17.5 14.663" id="img--svg--icon-twitter" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.283.153c1.736-.485 3.074.263 3.685 1.151.694-.226 1.372-.47 2.072-.691-.004.841-.538 1.478-.883 1.727.704.166 1.343-.48 1.343-.48-.175.976-1.035 1.746-1.611 1.977-.239 6.592-3.272 10.956-10.382 10.823h-.46c-.422 0-4.29-.45-5.047-1.843 2.341.192 4.011-.412 4.835-1.15-.989-.293-2.761-.464-3.07-2.881.362.105.583.223 1.228.117C1.757 8.067.385 7.366.461 5.218c.294.32 1.1.523 1.381.461C1.117 5.444-.188 2.398.921.843 2.794 2.654 4.769 4.364 8.29 4.528 8.506 2.288 9.461.787 11.283.153z"/></symbol>
</svg>

我已将它作为sprite.svg保存到img目录中。然后我想从精灵中获取带有使用标记的svg元素ID：

 <ul class="social__list">
          <li class="social__item">
            <a class="social__link social__link--twitter" href="#">
           <svg class="social__link social__link--twitter_icon" width="16" height="16"><use xlink:href="img/sprite.svg#img--svg--icon-twitter"></use>
           </svg>
          </a></li>
          <li class="social__item"><a class="social__link--facebook" href="#">Фейсбук</a></li>
          <li class="social__item"><a class="social__link--youtube" href="#">Ютуб</a></li>
        </ul>

图标显示在Firefox中，但根本没有在chrome中显示。我的chrome版本是61.0.3163.100。我试图在私人模式下关闭所有Chrome扩展和打开页面 - 它仍然没有显示。什么可能导致问题？