HTML5/SVG : preserveAspectRatio "none"이 Firefox에서 작동하지 않습니다.

SVG 이미지를 배경 이미지 HTML 요소로 사용하고 싶습니다. SVG는 포함 된 div에 따라 확장되어야합니다. 이것은 Chrome에서 잘 작동하지만 Firefox에서는 크기가 조정될 때 SVG가 폭/높이 비율로 고정되어 늘어나지 않습니다. 나는 preserverAspectRatio = "none"을 사용하고 있습니다.HTML5/SVG : preserveAspectRatio "none"이 Firefox에서 작동하지 않습니다.

SVG는 다음과 같습니다없이 뻗어 도착, 내가 div 요소와 SVG 이미지의 너비/높이를 변경할 수 있습니다 크롬에서

<div style=" 
     width: 250px; 
     height: 200px; 
     background-image:url(file.svg); 
     background-repeat:no-repeat;"> 
      test 
</div>

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg 
xmlns="http://www.w3.org/2000/svg" 
version="1.1" preserveAspectRatio="none" viewBox="0 0 180 95"> 
<g 
id="layer1"> 
<path 
    d="m 1.0714286,31.469326 140.0000014,0 0,-30.0000009 30,40.0000009 -30,40 0,-30 -140.0000014,0 z" 
    id="path3015" 
    style="fill:#4f81bd; fill-opacity:1; stroke:#385d8a; stroke-width:3; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1" /> 
</g> 
</svg>

HTML은 다음과 같습니다 원래의 너비/높이 비율을 돌 봅니다. 이 동작은 의도 된 것입니다. Firefox에서는 크기가 조정되고 원래 비율로 유지됩니다. 내가 어떻게 바꿀 수 있는지 아십니까? 감사합니다

출처

2012-05-09 alapeno

에 한번 당신의 '스타일'div (나를 위해 작동)에 background-size: 100% 100%;를 추가.

출처

2012-05-18 06:31:29

정말 고마워요. 이 사실을 발견하는 데 오랜 시간이 걸렸습니다. 또한 IE9에서 이상한 사이징 버그가 수정되었습니다. –

나는 background-size를 사용하고 있었다 : contains; 그러나 background-size : 100 % 100 %; 고마워, 고마워. – r8n5n

정답으로 표시하십시오. 이것은 나를 위해 일했다! –

HTML5/SVG : preserveAspectRatio "none"이 Firefox에서 작동하지 않습니다.

답변

관련 문제