Hình ảnh Svg không hiển thị trong Firefox

Question

Bên trong một phần tử SVG đơn giản, tôi có một hình ảnh.

• Chrome: Phiên bản 28. - hoạt động hoàn hảo
• Firefox: 22,0 - không có hình ảnh được vẽ
• Opera: 12,16 - hình ảnh hiển thị 4 lần lớn hơn bình thường

Code:

 
    <svg width="500px" height="500px" viewBox="0 0 70 70"> 
     <image x="0" y="0" width="10" height="10" 
       id="knight" xlink:href="/images/knight.svg" /> 
    </svg> 

Answer 1

SVG của bạn không được nhân rộng để phù hợp với hình chữ nhật hình ảnh 10x10 của bạn bởi vì nó không có viewBox. Trình kết xuất SVG cần biết kích thước của nội dung SVG để biết cách chia tỷ lệ. Đó là những gì thuộc tính viewBox dành cho.

Thử thêm phần sau vào phần tử gốc <svg> trong knight.svg.

viewBox="0 0 45 45" 

Ngoài ra, bạn cần phải xác định không gian tên của bạn cho svg và xlink. Mặc dù có lẽ bạn đã chỉ cần loại bỏ những người cho rõ ràng (?).

Answer 2

Hiệp sĩ của bạn có kích thước 45 x 45 pixel. Góc trên cùng bên trái (10 x 10) pixel trống.

Bạn đang yêu cầu hiển thị hình ảnh cho góc trên cùng bên trái trong đánh dấu <image> để Firefox hiển thị chính xác không có gì vì không có gì ở đó.

Nếu bạn muốn xem hiệp sĩ, hãy làm cho chiều rộng và chiều cao <image> 45 để phù hợp với kích thước knight.svg cơ bản.

Cả Chrome hay Opera dường như hiển thị hình ảnh một cách chính xác

An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’