Reactjs 使用Velocity.js从URL渲染SVG以制作动画

我正在构建一个界面来预览应用于SVG的动画。我试图通过React中的库将SVG的内部路径作为动画的目标。我正在使用

我能够将.svg文件拖放到输入中，输入提供了一个带有

文件

对象的回调。我可以将

文件

对象转换为base64编码的DataURL，然后将其提供给

标记。这将使用完整、扩展的xml标记呈现SVG

return (
    <object style={{
        width: '100%'
    }}
    id={`svg-${uuid}`} 
    type="image/svg+xml" data={dataURL}
/>)

我正在本地开发环境中工作，在

localhost:3000

上为React应用程序提供服务

作为一种可能的解决方法，我将讨论中的SVG上载到远程AWS S3存储桶。然后，我通过远程URL检索SVG，并试图以某种方式呈现它。我尝试了以下方法：

<svg>
     <use xlinkHref={url}></use>
</svg>

<svg>
     <use xlinkHref={url}></use>
</svg>

首先，我装载了一个简单的带有SVG url的

标记：

导致警告消失，但仅显示损坏的图像标记

---

如果您能帮助解决这些

CORS

警告，或为动画的目的在React中正确地将SVG嵌入DOM的方法，我们将不胜感激。也许我需要做的是通过服务器下载映像，并临时直接从服务器文件系统（例如从

/public

文件夹）为其提供服务。这不是我的首选方法，因为我已经在使用AWS S3进行图像托管。

答案是在AWS S3控制台中启用CORS。看见CORS配置在默认情况下似乎未启用，因此我必须将其保存以使其生效

const el = document.getElementById('svg');
SVGInjector(el);

对于这项建议。正如他所提到的，如果您正在提供来自另一个域的图像，而您无权访问该域，则可能需要使用代理。有关详细信息，请参阅“如何使用CORS代理解决“无访问控制允许源站标头”问题”一节。
如果您控制代码试图从中跨源站加载图像的服务器（
https://s3.amazonaws.com/.../example.svg
），您需要将该服务器配置为在服务这些映像时包含Access Control Allow Origin response标头。如果您不控制该服务器，那么您必须使用某种代理，或者是您在自己的后端上设置的代理，或者是开放的CORS代理。请参阅示例代码+解释中答案中的“如何使用CORS代理绕过“无访问控制允许原始标头”问题部分谢谢！这似乎成功了。现在，我可以使用react inlinesvg组件来呈现SVG。我跟着，打开了我的AWS S3 CORS。我将尝试删除标题，看看最佳配置是什么。
<object
    style={{
        width: '100%',
    }}
    id={`svg-${uuid}`} type="image/svg+xml" data={url}
/>

<object id="svg-..." type="image/svg+xml" data="https://s3.amazonaws.com/.../example.svg" style="width: 100%;"></object>

<Isvg src={url}/>

XMLHttpRequest cannot load https://s3.amazonaws.com/.../example.svg. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

return (
    <img
        ref={node => this.testSVG = node}
        src={url} id="svg" type="image/svg+xml" />
)

const el = document.getElementById('svg');
SVGInjector(el);

<!-- Sample policy -->
<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>