如何在 html <object> 标签中嵌入 SVG 从 Cross Origin url 说 (s3_url/image.svg)

Question

我浏览了我可以在互联网、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')

Answer 1

在托管您的 svg 文件的网络服务器上，您必须设置响应 Access-Control-Allow-Origin 标头。例如，对于 Apache Web 服务器，您必须启用 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>