너비 = 100 및 높이 = 100 인 svg 사용 사파리 e 크롬에 여분의 공간이 있습니다

Question

간단한 텍스트와 svg의 단순한 페이지를 높이와 무게로 테스트하면 svg 전후에 여유 공간이 생깁니다 . 이 파이어 폭스에 여분의 공간이 아니라, 당신은 Safari에서 그것을 발견 할 수 있으며 크롬 당신은 여기를 볼 수 있습니다

 <svg id="uno" xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 500 250" 
     width="100%" 
     height="100%" 
     preserveAspectRatio="xMidYMid meet"> 
     <polygon points="1, 20 500, 1 220, 250" 
      style="fill:#FFFFFF; 
      stroke:#000000;stroke-width:5"/> 
     <text x="47" y="42" font-size="24" fill="red" font-weight="bold">Colombini Locusta</text> 

     <text x="45" y="44" font-size="24" color="black" font-weight="bold">Colombini Locusta</text> 
     <rect x="200" y="100" width="70" height="70" style="fill:red"/> 
    </svg> 

왜 여분의 공간을 이해하기 위해 몇 가지 제안 : http://www.venerandi.com/svg_space.xhtml

이는 SVG 코드 만들어 졌나요?

감사합니다.

Answer 1

이것은 일반적인 질문입니다. 불행히도 Webkit 기반 브라우저에서 버그를 발견했습니다. 너비 및 viewBox 종횡비에 따라 적절한 높이를 계산해야합니다. 불행히도 그것은 아닙니다. "100 %"의 높이를 "페이지 높이"로 간주합니다. 당신이 그것에 대해 할 수있는 일은 많지 않습니다.

SVG의 크기를 직접 계산하고 설정하거나 또는 고정 된 크기로 설정하고 함께 살려면 자바 스크립트를 사용해야합니다.