SVG 요소의 경계 상자가 브라우저간에 일치하지 않습니다.

Question

브라우저간에 모양의 경계 상자가 일치하지 않는 것으로 나타났습니다. 나는이 포함 된 SVG를 만든 :

<rect x="100" y="100" width="100" height="100" id="rect" fill="gray" stroke="black" stroke-width="2px" /> 
<path d="M100 100 L100 200 L200 200 L200 100 z" id="path" fill="red" stroke="white" stroke-width="2px"/> 

내가 크기 크롬과 IE에 경계 상자 (element.getClientBoundingBox)를 얻으려고 노력 w됩니다 = 100, H = 100과 위치입니다 X = 100, Y = 100 두 셰이프 모두. 하지만 첫 번째 형태의 FireFox에서 w = 102, h = 102 (크기 + 경계선) 및 x = 99, y = 99가되었습니다. 경로에서 값은 더욱 이상합니다 (w = 116, h = 116, x = 92, y = 92).

Firefox 버그입니까? Bugzilla에 게시해야합니까? SVG 사양이 그것에 대해 뭐라고 말합니까? (나는 이것에 관련된 어떤 정보도 찾을 수 없었다). 이 문제를 해결하기위한 방법에 대해 아는 사람이 있습니까? 특히 경로 요소는 나에게 예측할 수없는 종류입니다.

Answer 1

Firefox는 테두리 상자에 획을 포함합니다. 이것이 정확하다는 것을 반영하도록 사양을 변경하려면 We have asked을 입력하십시오.

경로의 경우 뾰족한 모양의 크기를 계산하는 복잡성으로 인해 선이 찍힌 모양의 실제 크기를 계산하지 못하기 때문에 크기가 너무 큽니다. 우리는 뇌졸중 - miterlimit를 사용하여 상한선을 제공하지만 그렇게 좋지는 않습니다.

셰이프의 선을 제외하고 채우기 크기를 제공하는 SVG DOM getBBox 메서드를 사용할 수 있습니다.