foreignObject 요소 내에서 이상한 오버플로

Question

foreignObject 태그 안에 객체를 넣을 때마다 이상한 오버플로가 발생합니다. 아래 코드를 사용하십시오. 100x100으로 확장하는 대신 상자를 테두리 너비의 두 배인 120px로 확장합니다. 나는이 효과를 막기 위해 내 마음 속의 거의 모든 것을 시도했지만 아무 것도이 문제를 해결하는 것 같지 않습니다. 당신이 양쪽에 테두리를 가지고 있기 때문에

<svg width="4in" height="3in" version="1.1" 
xmlns = 'http://www.w3.org/2000/svg'> 
    <foreignObject width="100" height="100"> 
     <div style="width:100%;height:100%;background-color: #fcefa1;border:10px solid  #ff0000;"></div> 
    </foreignObject> 
</svg> 

Answer 1

그것은 이중 테두리 너비의 10 플러스 열 스물입니다. Try this :

<svg width="4in" height="3in" version="1.1" 
xmlns = 'http://www.w3.org/2000/svg'> 
    <foreignObject width="100" height="100"> 
     <div style="width:100%;height:100%;background-color: #fcefa1;border:10px solid #ff0000; -moz-box-sizing: border-box; box-sizing: border-box;"></div> 
    </foreignObject> 
</svg> 

box-sizing CSS property는 너비가 적용되는 것을 제어 할 수 있습니다.