img foreignObject 내부 svg 내부 img

내 테스트 사례입니다. http://tobeythorn.com/isi/isitest.html img foreignObject 내부 svg 내부 img

I 단지 자체로 SVG를 열면

http://tobeythorn.com/isi/dummy2.svg
는 내부 IMG 잘 표현된다. 나는 이것이 IMG의 SRC를 SVG 할 때
그러나, 내부 IMG는 렌더링되지 않습니다. 오류가 없습니다.
내부 이미지를 데이터 URL로 만들면 렌더링됩니다. 가능하다면 데이터 URL을 피하고 싶습니다. 일을 복잡하게하고 크기 제한이 있으며 캐시 할 수 없기 때문입니다.
FF, Chrome, Opera 및 Safari에서 동일한 문제가 발생합니다.

나는 해결책을 찾을 수 있지만, 아마도 관련 수 없습니다 foreignObject inside second SVG element for Chrome

크로스 원산지 문제?

사양의 제한?

브라우저 버그?

2015-01-17 user3788756

, 우리는 "감사합니다"를 사용하지 않는, 또는 "어떤 도움 감사합니다", 또는 서명을 [그래서]. "[안녕하세요, '고마워,'태그 라인 및 인사말을 게시물에서 삭제해야합니까?] (http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be 참조) - 게시물에서 제외되었습니다.) BTW, "사전에 감사드립니다." "고맙습니다." –

이미지로 사용되는 모든 SVG는 단일 파일로 작성되어야합니다. 이미지에서 외부 데이터를로드 할 수 없습니다.

따라서 base64 encode 이미지를 가져와 data URL으로 이미지를 SVG에 삽입해야 작동합니다.

출처

2015-01-17 06:44:34

알다시피, 매우 성가시다. 매우 귀찮음. – user3788756

나는 이것을 해결할 필요가있다. – brainbag

@brainbag 특히 base64 인코딩을 수행하는 방법 또는 데이터 URL을 만드는 방법 온라인 인코더와 위키 피 디아 또는 기타 소스에서 데이터 URL을 설명합니다. 자세한 내용을 추가 할 수 있습니까? 대답에 대한 링크를 추가했습니다. –

나는 당신의 예를 볼 수 있지만, SVG하는 HTML 요소를 추가 할 JS를 사용하는 경우, 당신은이 요소가 SVG 또는 HTML임을 브라우저에게 접두사를 사용하여 기억해야합니다. 예를 들어

, 당신은 HTML의 IMG 요소를 추가하는 경우 :에 포럼 사이트와는 달리

$('svg').append('svg:foreignObject').append('xhtml:img').attr('src','./foo.jpg');

출처

2016-11-14 02:45:48 yandong

img foreignObject 내부 svg 내부 img

답변

관련 문제