삽입 된 svg의 크기가 올바르게 조정되지 않았습니다.

svg에 svg를 포함하려고합니다. 실제 응용 프로그램은 d3 차트에 이미지를 포함 할 수 있습니다. 이 래스터 이미지 (PNG/JPG)이 있다면삽입 된 svg의 크기가 올바르게 조정되지 않았습니다.

이

<svg viewBox="0 0 200 200" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <circle cx="0" cy="0" r="80" style="fill:blue" /> 
    <image x="10" y="20" width="120" height="150" xlink:href="https://webkit.org/blog-files/circle.svg" /> 
</svg>

포함 된 이미지가 제대로 확장 만이 아니라 SVG : 여기에 단순화 된 버전입니다. 그것의 바이올린은 작동하지 않습니다 - 큰 빨간 사각형은 실제로 this circle이어야합니다.

https://jsfiddle.net/rg4kyuc7/1/

어떻게 지정된 width 및 height로 확장 할 수있는 SVG를받을 수 있나요?

편집 - Chrome에서는 작동하지만 Firefox에서는 작동하지 않습니까?! 어떤 아이디어?

출처

2016-11-22 Escher

에 대한 MDN 문서입니다 SVG 2 동작을 따르고 있습니다. 크롬은 다른 브라우저보다 SVG 2를 구현하는 데 더 나아 보인다. SVG 1.1 표준 만 지원한다면 임베드 된 이미지를 표시하는 방식이 잘못 될 수 있습니다.

파이어 폭스 (및 그 작동하고 IE는) 모두 SVG에 대한 잘못된 모두 1.1 및 SVG (2) 1.1 표준 <image>에 의해 참조 된 SVG 파일이 더 viewBox이없는 경우 즉, 그냥해야 이렇게 말한다 SVG x 및 y 속성에 의해 정의 된 위치에 표시되고 <image> 요소의 width 및 height은 무시됩니다. 이 같은 즉 : 어떤 경우에

<svg viewBox="0 0 200 200" version="1.1" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <circle cx="0" cy="0" r="80" style="fill:blue" /> 
 
    <image x="10" y="20" width="335" height="296" xlink:href="https://webkit.org/blog-files/circle.svg" /> 
 
</svg>

, 간단한 수정이 있습니다. 적절한 viewBox을 circle.svg에 추가하면 SVG 2를 지원하는지 여부에 관계없이 모든 브라우저에서 동일하게 렌더링됩니다.

<svg xmlns="http://www.w3.org/2000/svg" width="335" height="296" viewBox="0 0 335 296">

출처

2016-11-23 13:20:33

SVG의 태그를 사용하여 비슷한 문제가 발생했습니다.

이렇게하면 html img 태그를 포함하고 스타일을 지정할 수 있습니다. 이런 식으로 뭔가 : 여기

<svg viewBox="0 0 200 200" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <circle cx="0" cy="0" r="80" style="fill:blue" /> 
    <foreignObject x="10" y="20" width="120" height="150" 
        requiredExtensions="http://www.w3.org/1999/xhtml"> 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
     <img src="https://webkit.org/blog-files/circle.svg" alt="Smiley face" height="150" width="120"> 
     </body> 
    </foreignObject> 
</svg>

는 <image>의 동작은 SVG 1.1 및 2

그것은 크롬처럼 보이는 곧 SVG 사이에 약간의 변화

https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject

출처

2016-11-23 11:08:20 Fabio

삽입 된 svg의 크기가 올바르게 조정되지 않았습니다.

답변

관련 문제