2014-09-17 4 views
1

낮은 (높이 < 16px) SVG가 HTML에서 이상한 수직 오프셋 (브라우저간에 유사하지만 동작이 동일하지 않음)으로 배치된다는 것을 알았습니다. w 라인/오프셋 -HTML에서 svg의 최소 높이

나쁜 :

<div style="height: 1px; width: 100%;"> 
    <svg width="100%" height="1px"> 
     <line x1="0" y1="0" x2="100%" y2="0" stroke="rgb(255,0,0)" stroke-width="1"/> 
    </svg> 
</div> 

대 좋은 - 오프셋 (offset) O/W 라인 (국경 아래 1 x 1 픽셀) :

<div style="height: 1px; width: 100%;"> 
    <svg width="100%" height="16px"> 
     <line x1="0" y1="0" x2="100%" y2="0" stroke="rgb(255,0,0)" stroke-width="1"/> 
    </svg> 
</div> 

인가 http://plnkr.co/edit/ekdIzBtXKMh3aRHpLus5?p=preview에서 먼저 2 예는 상황을 보여 이것에 대한 실제 (예 : 스펙 기반) 설명을 알고있는 사람은 누구입니까? 1px 높이 (선) SVG 올바르게 배치 할 수 싶습니다. 100 % 확신 할 수있는 방법이 있습니까? 힌트를

감사합니다 사람, 고정

답변