从 URL 渲染 SVG 以使用 Velocity 进行动画.js

Question

我正在构建一个界面来预览应用于SVG的动画。我正在尝试在 React 中使用 Velocity.js 库来定位 SVG 的内部动画路径。我正在使用create-react-app。

我能够将.svg文件拖放到 react-dropzone 输入中，该输入提供了 File 对象的回调。我可以将 File 对象转换为 base64 编码的 DataURL，然后我可以将其提供给

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

任何使用javascript访问SVG的contentDocument的尝试（为了直接针对g和path元素进行动画）都会导致以下错误：

document.getElementById('svg-665790ae-2a36-446e-9ea9-856442e8b1dc').contentDocument

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLObjectElement': 
Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

我正在开发一个本地开发环境，在localhost：3000上为React应用程序提供服务。

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

反应SVG＜代码＞

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

这会产生以下标记，但没有可见的SVG：

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3.amazonaws.com/.../example.svg">
    </use>
</svg>

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

这导致了下面的标记，没有可见的SVG，并导致浏览器立即将SVG下载为文件。

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

react-inlinesvg库

这个库发出一个XHR请求来检索SVG，然后将它嵌入到DOM中。

<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.

SVGInjector

首先，我安装了一个简单的

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

这也会导致上述XMLHttpRequest错误。尝试使用节点ref（即SVGInjector（this.testSVG）从componentDidMount调用SVGInjector），或者以这种方式：

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

导致警告消失，但只显示一个损坏的图像标签。

如果您能帮助解决这些＜code＞COR＜/code＞警告，或者为动画目的在React中正确地将SVG嵌入DOM提供指导，我们将不胜感激。也许我需要做的是通过服务器下载映像，并临时直接从服务器文件系统（例如从＜code＞/public＜/code＞文件夹）提供映像。这不是我的首选方法，因为我已经在使用AWS S3进行图像托管。




Answer 1

答案是在AWS S3控制台中启用CORS。见stack overflow . com/questions/17533888/S3-access-control-allow-origin-header。默认情况下，CORS配置似乎没有启用，所以我必须保存它才能生效。

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

感谢sidehowbarker的这个建议。正如他所提到的，如果您要从另一个域提供您无权访问的图像，则可能需要使用代理。有关详细信息，请参阅 stackoverflow.com/a/43881141/441757，请参阅如何使用 CORS 代理解决“无访问控制-允许-源标头”问题一节下。