렌더링 인라인 SVG in firefox

나는 셰이프 생성을 허용하는 곳에서 작업하고 있으며 자바 스크립트를 통해 빌드 된 인라인 svg를 사용하여이 작업을 수행합니다. 나는 svg가 Chrome에서 올바르게 렌더링되는 이상한 문제를 겪고 있지만 Firefox에서는 SVG의 일부를 잘라냅니다. 아래 코드는 별 모양입니다. 크롬에서는 이것이 완벽하게 나타납니다. 파이어 폭스에서는 이미지의 왼쪽 상단 만 25 % 정도를 볼 수 있습니다.렌더링 인라인 SVG in firefox

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> 
<head></head> 
<body> 

<svg shape-rendering="" preserveAspectRatio="none"> 
<polygon transform="rotate(0 100 100)" points="256.53212826312154,13.412653125,314.88080229627076,201.3216034012431,499.6516034012431,201.3216034012431,348.91752881560774,320.0009404178177,382.9542553349448,507.9098906940608,256.53212826312154,389.2305536774862,130.11000119129832,507.9098906940608,164.14672771063536,320.0009404178177,13.412653125,201.3216034012431,198.18345422997237,201.3216034012431,256.53212826312154,13.412653125" fill="rgb(49, 48, 255)" stroke="black" stroke-width="2.49125px" style="position: absolute; "> 
</polygon> 
</svg> 

</body> 
</html>

우리가 뭔가 잘못하고 있거나 Firefox에 문제가 있는지 확실하지 않습니다. 흥미로운 점은 별을 작게 (이 크기의 1/4처럼) 만들면 Firefox에서 완벽하게 렌더링된다는 것입니다.

도움 주셔서 감사합니다.

출처

2012-04-27 wookie924

너비와 높이 속성을 <svg> 요소에 추가해야합니다. 너비 = "100 %"및 높이 = "100 %"가 귀하의 경우에 잘 작동 할 수 있습니다.

출처

2012-04-27 15:41:43

답변 해 주셔서 감사합니다. 그것은 Firefox에서 매력처럼 작동합니다. 그래서, 굉장해. 당신의 도움을 주셔서 감사합니다. – wookie924

왜 Firefox에서만이 기능이 필요합니까? 스펙에서 볼 수 있듯이 기본값은 이미 100 %입니다 ([source] (http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute)). –

http://www.w3.org/TR/2011/PR-SVG11-20110609/coords.html#ViewportSpace 다음 조건이 충족되지 않는 한 가장 바깥 쪽 svg 요소의 'width'속성이 뷰포트의 너비를 설정합니다. 모두 충족되어서 그렇지 않습니다. –

렌더링 인라인 SVG in firefox

답변

관련 문제