사파리/파이어 폭스에서 svg 이미지 요소 렌더링 문제가 발생했습니다.

Question

나는 express 4에 반응하는 앱을 만들고 있는데, 앱의 일부는 d3을 사용하여 작성한 그래프입니다. 그것은 본질적으로 페이지의 렌더링

<svg width="1373.6499999999999" height="250"> 
    <g transform="translate(20,20)" > 
    <image href="/images/withdrawal.png" class="withdrawal" x="100.84925373134327" y="72.41613009407105" width="30" height="30"> 
    </image></g></svg> 

이 될하지만 단지 빈해야하는 위치 : : 저는 예를 들어 사파리와 파이어 폭스 (하지만 크롬)에 SVG 태그 안에 보관 유지하는 이미지에 문제가

다른 파일 형식과 전체 URL을 사용해 보았습니다. 나는 다른 doctypes를 시도했으나 그것은 나를 데려 오지 않는 것 같습니다.

사파리에 렌더링되지 않는 이미지 태그와 관련하여 많은 문서가 있지만 문제가 될 수있는 가장 가까운 것을 말할 수있는 한 콘텐츠 유형 헤더는 어떤 성공도 거두지 못했습니다. . 반응이없는 svg를 시도했지만 여전히 동일한 문제가 발생합니다.

대신 그래프 대신 img를 추가 할 수는 있지만이를 피하고 싶습니다.

Answer 1

<image> 요소의 href 속성은 SVG 네임 스페이스의 일부가 아닙니다. 대신 XLink 네임 스페이스에 속합니다. 따라서 네임 스페이스 선언을 추가하고 이에 따라 특성 앞에 접두사를 추가해야합니다 (대부분 xlink:href).

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="1373.6499999999999" height="250"> 
    <g transform="translate(20,20)" > 
    <image xlink:href="/images/withdrawal.png" class="withdrawal" x="100.84925373134327" y="72.41613009407105" width="30" height="30"> 
    </image> 
    </g> 
</svg>