SVG <defs> tạo khoảng trắng

Tôi đang sử dụng SVG trong dự án của mình, bây giờ tôi phải tạo phần tử SVG bên trong trang web chỉ với <defs>. Sau đó trong trang tôi đã sử dụng nhiều lần đối tượng được xác định trước đó. Vấn đề nằm trong đối tượng với các định nghĩa, infact nó tạo ra một khoảng trống trong trang. Hãy thử mã này:SVG <defs> tạo khoảng trắng

<!DOCTYPE html> 
<html> 
    <body> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
      <defs> 
       <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
      </defs> 
     </svg> 

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> 
      <use x=0 y=0 xlink:href="#star"> 
     </svg> 
    </body> 
</html>

Tôi gặp sự cố với cả Firefox và Chrome. Tôi không quan tâm đến IE.

Nguồn

2013-05-24 Max Markson

Thêm zero kích thước để các quy định <svg> tag:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> 
     <defs> 
      <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
     </defs> 
    </svg>

Như bạn thiết lập không viewport cũng không chiều, tôi đoán, trình duyệt cố gắng để suy ra giá trị ở đây và do đó dẫn đến một "kích thước mặc định" cho SVG , do đó hiển thị không gian trống.

EDIT

Ngoài ra, thiết lập display: none đến <svg> với <defs> yếu tố:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none;"> 
     <defs> 
      <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
     </defs> 
    </svg>

Nguồn

2013-05-24 07:21:51 Sirko

Không gian bị giảm nhưng không bị biến mất. Hãy thử di chuyển định nghĩa sau khi sử dụng, bạn sẽ thấy việc sử dụng di chuyển lên và không gian trống di chuyển xuống. –

@MaxMarkson Trong FF và Chrome của tôi, ' '-SVG biến mất hoàn toàn. Bạn có chắc chắn, không có một số paddings hoặc lợi nhuận áp dụng ở đâu đó? – Sirko

Kiểm tra hình ảnh này: http://imageshack.us/a/img819/2999/defsafter.png http://imageshack.us/a/img826/1323/defsbefore.png –

Hai lý do tại sao điều này xảy ra là:

thiếu kích thước
<svg> được trả lại như display:inline

Thêm kích thước cho <svg> thẻ ban đầu sẽ giấu hầu hết các không gian được thực hiện nhưng một phần nhỏ sẽ vẫn còn.

Đặt display:none sẽ ẩn mọi mẫu/gradient/tham chiếu trong các phần tử <svg> khác và do đó không phù hợp.

Để ẩn hoàn toàn, hãy đặt thẻ <svg> thành display:block. Sau đó nó sẽ tôn trọng các kích thước chiều dài bằng không được đưa ra trước đó.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block;"> 
    <defs> 
     <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
    </defs> 
</svg>

Nguồn

2016-06-02 16:33:04 jussinen

Điều này chỉ hoạt động sau khi đặt 'width =" 0 "' và 'height =" 0 "' kết hợp với 'display: block' hoặc 'position: absolute'. – Dominik

Trả lời

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