Phần tử SVG dường như có chiều cao tùy ý

Tôi đã thực sự cố gắng tìm hiểu một số SVG. Tuy nhiên, các trình duyệt dường như có được một muddle cũ.Phần tử SVG dường như có chiều cao tùy ý

Lấy HTML sau:

<html> 
    <head></head> 
    <body> 
    <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> 
     <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
    </svg> 
    <p>Hello? Hellooooooooooooo?</p> 
    </body> 
</html>

Xem đây là bất kỳ trình duyệt hiện đại và bạn sẽ thấy số tiền tùy ý các khoảng trắng giữa hình chữ nhật và các đoạn HTML sau. (IE9 không hiển thị bất cứ điều gì nhưng không ai sẽ ngạc nhiên về điều đó.)

Firefox (Firebug) không cung cấp chiều cao của các yếu tố svg hoặc rect. Nó chỉ hiện ra và nói 'tự động'.

Opera nói rằng svg có chiều cao là 150px và nói 'tự động' cho rect.

Chrome tải lên và cung cấp độ cao cho cả hai. 102px cho rect (rõ ràng bao gồm cả hành trình) và 428px cho svg.

Kỳ vọng của tôi là phần tử svg sẽ là một hộp chứa 'mỏng' (nghĩa là không thêm gì vào kích thước nội dung của nó) và do đó có chiều cao 102px.

Bất cứ ai cũng biết hành vi chính xác sẽ là gì và cách tôi có thể khắc phục vấn đề này?

Nguồn

2012-01-01 David

Trình gỡ xuống có thể tự giải thích được không? – David

Ah. 2 downvotes. Không có lời giải thích hoặc gợi ý. Trolls? – David

Bạn chưa xác định rõ chiều rộng hoặc chiều cao của SVG là gì hoặc vị trí đặt hình chữ nhật hoặc thậm chí phần nào của SVG được quan tâm. Nó hầu như không ngạc nhiên các trình duyệt đang đối phó với những thứ khác nhau.

Cố gắng xác định chiều rộng và chiều cao:

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="102px" height="102px"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

Ngoài ra, xác định một viewBox:

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 102 102"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

Hoặc cả hai:

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 52 52" width="102px" height="102px"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

Here are some examples in action.

Nguồn

2012-01-01 23:35:04 robertc

Cảm ơn bạn robertc. Vì vậy, tôi phải tính toán kích thước của các bản vẽ bên trong phần tử 'svg' bản thân mình để cung cấp cho nó một chiều rộng và chiều cao? Tôi cho rằng nó sẽ tự kích thước xung quanh nội dung của nó, giống như một 'div'. – David

Cảm ơn bạn đã liên kết jsfiddle bằng cách này. Đây là câu trả lời hữu ích nguyên mẫu. – David

@David Nó sẽ không tự kích thước xung quanh nội dung vì 'nội dung' là một mặt phẳng vô hạn;) – robertc

Phần tử SVG dường như có chiều cao tùy ý

Trả lời

Các vấn đề liên quan