我想使用<use>标签从外部URL加载svg，这样我就可以对我的svg而不是<img>标签有更多的控制权。但当我在同一个页面上使用svg并使用<use>标签加载时，它的工作非常完美。但由于我正在将svg上传到外部URL并将URL放入<use>中，所以它不起作用。
工作示例代码
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="icon-image">
<path class="path1" d="M0 4v26h32v-26h-32zM30 28h-28v-22h28v22zM22 11c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3zM28 26h-24l6-16 8 10 4-3z"></path>
</defs>
</svg>
<h1>
Photo Gallery
<svg viewBox="0 0 32 32">
<use fill="blue" xlink:href="#icon-image"></use>
</svg>
</h1>但我想要这样的东西(不起作用(。我已经在外部URL上传了相同的svg图像，但它没有显示在页面上。
<h1>
Photo Gallery
<svg viewBox="0 0 32 32">
<use fill="blue" xlink:href="https://cdn.jsdelivr.net/gh/instanano/apparatus/test555.svg#icon-image"></use>
</svg>
</h1>正如@Robert Longson已经指出的：
由于安全设置，您可能无法嵌入外部svg符号/defs引用。
如果外部主机允许对svg文件进行跨源访问，则可以使用以下polyfill:
- polyfill by@thasmo
- svgxuse by@Keyamoon(icomoon开发者(
jsdelivr等脚本库专用的CDN通常会添加合适的CORS头(或提供一些选项以允许跨源访问(。
另一方面：像svgshare这样的svg共享站点不允许远程访问(但它适用于<img>元素，但您将无法获取和解析svgDOM(。
示例1：使用@thasmo的外部svg-polyfill
由于某些原因，这个polyfill在iOs safari上的SO片段中不起作用
window.document.addEventListener('DOMContentLoaded', function() {
new ExternalSvgPolyfill();
});svg {
display: inline-block;
width: 25%;
border: 1px solid #ccc
}<!-- works! -->
<svg viewBox="0 0 32 32">
<use fill="blue" xlink:href="https://cdn.jsdelivr.net/gh/instanano/apparatus/test555.svg#icon-image" />
</svg>
<!--won't work -->
<svg viewBox="0 0 32 32">
<use fill="blue" xlink:href="https://svgshare.com/i/mJH.svg#icon-image" />
</svg>
<script src="https://cdn.jsdelivr.net/npm/@thasmo/external-svg-polyfill@2/browser/bundle.min.js"></script>示例2：使用@Keyamoon的svgxuse
svg{
display:inline-block;
width:25%;
border: 1px solid #ccc
}<svg viewBox="0 0 32 32">
<use fill="blue" href="https://cdn.jsdelivr.net/gh/instanano/apparatus/test555.svg#icon-image" />
</svg>
<svg viewBox="0 0 32 32">
<use fill="blue" xlink:href="https://svgshare.com/i/mJH.svg#icon-image" />
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svgxuse/1.2.6/svgxuse.min.js"></script>两个polyfill都获取外部svg内容，并将其作为隐藏的内联<svg>元素附加到DOM中。
另请参阅：(了解CORS和SVG(