2016-12-17 32 views
5

Vì một số lý do, Chrome hiển thị SVG mà không có hình ảnh trong thẻ Hình ảnh.Hình ảnh trong SVG Thẻ hình ảnh không hiển thị trong Chrome, nhưng hiển thị cục bộ?

Đây là một mẫu từ SVG của tôi:

<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/> 

blocker.png là một tập tin địa phương, nhưng tôi cũng đã cố gắng tải lên nó để imgur, nhưng điều đó không làm việc, hoặc.

Dưới đây là thẻ svg:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 

Đây là những gì nó trông giống như địa phương:

http://i.imgur.com/BDP8KpG.png

Đây là những gì nó trông giống như trên một trang web trực tiếp:

http://i.imgur.com/KVuxLI1.png

Như bạn có thể thấy, hai người chơi đang mất tích. Điều này không xảy ra khi tôi tải lên SVG trực tuyến, nhưng khi tôi cố liên kết URL đó với trang của tôi, điều tương tự xảy ra

Không chắc chắn nó có liên quan hay không, nhưng đây là mã HTML cho trang:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>SVG</title> 
<style> 
img{ 
    width: 100%; 
    height:auto; 
    max-width: 800px; 
} 
</style> 
</head> 

<body> 

<div> 
    <img src="svg.svg"/> 
</div> 

</body> 
</html> 
+0

Bạn có chắc chắn thay đổi đường dẫn của thẻ '' để phản ánh các thay đổi không? I E.thay đổi 'blocker.png' thành' http: // imgur.com/you/ABCDEF' hoặc bất kỳ liên kết nào khác là – Jhecht

+0

@Jhecht Vâng, tôi chắc chắn là tôi đã làm. Tôi tải nó lên cục bộ, nó xuất hiện. Tải trên trang web của tôi, nó không. – sgruggy

Trả lời

12

Câu trả lời của PaulLeBeau là đúng. Nhưng một giải pháp khác là sử dụng thẻ embed thay vì thẻ img cho hình ảnh.

<embed src="svg.svg"> 

Here là một số cách để nhúng hình ảnh svg vào HTML.

+0

Wow, greatttt !!! Cảm ơn bạn :) – kabrice

4

Khi bạn tải SVG vào trang web sử dụng phần tử <img>, SVG phải được khép kín. Nó không thể liên kết đến các tài nguyên phần thứ ba như bạn đang làm bằng cách liên kết tới các tệp PNG. Đây là một hạn chế riêng tư được áp đặt bởi trình duyệt.

giải pháp có thể là:

  1. Chuyển đổi PNG sang định dạng URI dữ liệu và bao gồm chúng trong SVG của bạn theo cách đó.

  2. Chuyển đổi trình chặn của bạn PNG (s) thành các phần tử SVG thực tế, chẳng hạn như <path>.

+0

Tại sao nó hoạt động cục bộ? – sgruggy

+0

Nếu đó là sự thật, nó sẽ không hoạt động hoặc khi tôi tải nó lên trang web lưu trữ hình ảnh trực tuyến, mà nó đã làm. – sgruggy

+1

Xem SVG trong trình duyệt của bạn (ví dụ: tệp '.svg') là tốt, bởi vì bạn không tải nó qua một' '. Điều tương tự cũng áp dụng nếu trang lưu trữ hình ảnh của bạn lưu trữ và phục vụ tệp '.svg' trực tiếp thay vì nhúng nó qua một' '. –

-1

Tôi tình cờ phát hiện ra rằng Chrome [v 58.0.3029.81 (64-bit)] không hiển thị hình ảnh bên trong svg nếu tệp hình ảnh không được đặt tại thư mục gốc html. Tệp .svg và tệp .png được nhúng được đặt trong/hình ảnh -folder, nội dung .svg xuất hiện ngay trong Chrome, chứ không phải tệp .png được nhúng. Khi .png được sao chép vào (../) gốc html, Chrome hoạt động.

Tuy nhiên, Firefox [v 52.0.2 (32-bit)] có vẻ hoạt động tốt khi .svg và .png nằm trong cùng thư mục/hình ảnh.

Chỉnh sửa: Thực ra trong trường hợp của tôi, tôi tải svg bằng phương thức d3.xml (..) để xử lý js với các phần tử svg thực tế.

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