从外部url加载svg的<use>标记
从外部url加载svg的<use>标记
提问于 2022-09-01 07:09:55
我希望通过使用<use>标记从外部URL加载svg，这样我就可以对svg而不是<img>标记有更多的控制。但是，当我在同一个页面上使用svg并使用<use>标记加载时，它的工作非常完美。但是当我将svg上传到外部URL并在<use>中放置URL时，它就不能工作了。
工作示例代码
<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>
但我想要这样的东西(不起作用)。我已经上传了相同的svg图像的外部URL，但它没有显示在页面上。
<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>
回答 1
Stack Overflow用户
发布于 2022-09-01 15:27:31
正如@Robert Longson已经指出的那样：
由于安全设置，您可能无法嵌入外部svg符号/defs引用。
如果外部主机允许对svg文件进行跨源访问，则可以使用以下多填充：
专用于脚本库的CDN(如jsdelivr )通常会添加合适的CORS头(或者提供一些允许跨源访问的选项)。
另一方面: svg共享站点(如史夫切尔 )不允许远程访问(但它对<img>元素很好，但您将无法获取和解析svg )。
示例1:使用@thasmo的外部-svg-polyfill
由于某些原因，此多边形填充在iOs safari上无法工作
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:使用svgxuse by @Keyamoon
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>
这两个多边形都获取外部svg内容，并将其作为隐藏的内联<svg>元素附加到DOM中。
另见：(了解CORS和SVG)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73565426
复制相关文章
相似问题
腾讯云开发者
