Velocity.js로 애니메이션 용 URL에서 SVG 렌더링

Question

SVG에 적용된 애니메이션을 미리보기위한 인터페이스를 구축 중입니다. React에서 Velocity.js 라이브러리를 사용하여 SVG의 내부 경로를 애니메이션으로 타겟팅하려고합니다. 나는 create-react-app을 사용하고 있습니다.

File 개체가있는 콜백을 제공하는 react-dropzone 입력으로 .svg 파일을 끌어서 놓을 수 있습니다. File 개체를 base64로 인코딩 된 DataURL로 변환 한 다음 <object> 태그에 제공 할 수 있습니다. 이렇게하면 SVG가 확장 된 전체 XML 마크 업으로 렌더링됩니다.

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

다음과 같은 오류가 발생 ( g 및 path 직접 애니메이션 요소 대상의 목적을 위해) 자바 스크립트를 사용하여 SVG의 contentDocument에 액세스하려는 시도, : 내가하고 있어요

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를 검색하고이를 렌더링하려고합니다. 이것은 다음과 같은 마크 업 결과

React SVG <use> tag

<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> 태그를

<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 라이브러리

이 라이브러리는 SVG를 검색 할 수있는 XHR 요청을하게 한 후 DOM로를 포함합니다.

<Isvg src={url}/> 

이 다음과 같은 오류가 발생합니다 :이 또한 결과

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

:

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

먼저 내가 SVG의 URL과 간단한 <img> 태그를 장착 상기 XMLHttpRequest 오류. SVGInjector, componentDidMount에서 노드 ref (즉,또는 이와 같이, SVGInjector(this.testSVG))

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

사라질 경고 발생하지만 부서진 이미지 태그의 결과를 표시.

CORS 경고 또는 DOM의 SVG를 애니메이션의 목적으로 React에 임베드하는 올바른 방법에 대한 지침을 주시면 큰 도움이 될 것입니다. 아마도 서버를 통해 이미지를 다운로드하고 서버 파일 시스템 (예 : /public 폴더)에서 직접 이미지를 제공하기 만하면됩니다. 이미 AWS S3를 이미지 호스팅에 사용하고 있으므로이 방법을 선호하지 않습니다.

Answer 1

대답은 AWS S3 콘솔에서 CORS를 활성화하는 것이 었습니다. stackoverflow.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> 

이 권장 사항은 sideshowbarker입니다. 언급했듯이 액세스 권한이없는 다른 도메인의 이미지를 제공하는 경우 프록시를 사용해야 할 수도 있습니다. 섹션의 stackoverflow.com/a/43881141/441757을 참조하십시오. CORS 프록시를 사용하여 "No Access-Control-Allow-Origin header"문제를 해결하는 방법에 대한 자세한 내용은을 참조하십시오.