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

Question

I went through all the possible resources I could find on the internet, MDN, W3C etc. but nowhere could I find any documentation regarding cors.

I'm trying to embed an SVG in HTML . It works fine in same origin URL

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

On using cross_origin_url, it is not able to embed the SVG.

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

in the 1st case, I can access the SVG using the following code and do the required manipulation (like changing color) on the SVG.

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

while in the 2nd case, it returns throws an error as contentDocument of obj2 returns null.

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

Answer 1

On webserver that hosts Your svg file You must set response Access-Control-Allow-Origin header. For example for Apache webserver You must enable mod_headers and configure it in Your configuration for Your server in config files or .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>