如何将 SVG 嵌入到来自 Cross Origin url 的 html <object> 标签中（s3_url/image.svg）

Posted 2023-02-27

【中文标题】如何将 SVG 嵌入到来自 Cross Origin url 的 html <object> 标签中（s3_url/image.svg）

【英文标题】：How to embed SVG in html <object> tag from Cross Origin url say (s3_url/image.svg)

【发布时间】：2018-12-24 01:24:58

【问题描述】：

我浏览了在 Internet、MDN、W3C 等上可以找到的所有可能资源，但我在任何地方都找不到有关 cors 的任何文档。

我正在尝试在 html 中嵌入 SVG。它在同源 URL 中工作正常

<object id="obj1" data="same_origin_url/image.svg"></object>

使用 cross_origin_url 时，无法嵌入 SVG。

<object id="obj2" data="cross_origin_url/image.svg"></object>

在第一种情况下，我可以使用以下代码访问 SVG 并在 SVG 上执行所需的操作（例如更改颜色）。

document.getElementById('obj1').contentDocument.getElementByTagName('svg')

在第二种情况下，它返回抛出一个错误，因为 obj2 的 contentDocument 返回 null。

document.getElementById('obj2').contentDocument.getElementByTagName('svg')

【参考方案1】：

在托管您的 svg 文件的网络服务器上，您必须设置响应 Access-Control-Allow-Origin 标头。例如对于 Apache 网络服务器，您必须启用 mod_headers 并在配置文件或 .htaccess 中为您的服务器配置它。

    <IfModule mod_headers.c>
        <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css|js|gif|png|jpe?g|svg|svgz|ico|webp)$">
            Header set Access-Control-Allow-Origin "*"
        </FilesMatch>
    </IfModule>