Obrazy w SVG Tagi graficzne nie wyświetlają się w Chrome, ale wyświetlają się lokalnie?

Z jakiegoś powodu Chrome wyświetla obraz SVG bez obrazów w tagach graficznych.Obrazy w SVG Tagi graficzne nie wyświetlają się w Chrome, ale wyświetlają się lokalnie?

Oto przykład z mojego SVG:

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

blocker.png jest plikiem lokalnym, ale próbowałem też przesłać go do Imgur, ale to nie działało.

Oto tag 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">

Oto jak to wygląda na miejscu:

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

Oto jak to wygląda na żywo strony:

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

Jak możesz zobacz, brakuje dwóch graczy. To nie zdarza się kiedy przesłać SVG online, ale gdy próbuję połączyć ten adres do mojej strony, to samo dzieje się

Nie jestem pewien, czy to istotne, ale tutaj jest kod HTML na stronę:

<!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>

Źródło

2016-12-17 sgruggy

Czy zmieniłeś ścieżkę znacznika '', aby odzwierciedlić zmiany? To znaczy.zmień 'blocker.png' na' http: // imgur.com/you/ABCDEF' lub cokolwiek innego link: – Jhecht

@Jhecht Tak, upewniłem się, że tak. Załadowałem go lokalnie, pojawił się. Załadowany na mojej stronie, tak się nie stało. – sgruggy

Odpowiedź PaulaLeBeau jest słuszna. Ale innym rozwiązaniem jest użycie znacznika embed zamiast znacznika img dla obrazu.

<embed src="svg.svg">

Here kilka sposobów, aby osadzić obrazów SVG w HTML.

Źródło

2016-12-17 06:15:24 nisekgao

Wow, greatttt !!! Dziękuję Ci :) – kabrice

Po załadowaniu SVG na stronę WWW przy użyciu elementu <img>, SVG musi być samodzielny. Nie może łączyć się z zasobami trzeciej części, tak jak robisz, łącząc się z plikami PNG. To ograniczenie prywatności nałożone przez przeglądarkę.

Możliwe rozwiązania to:

Konwersja do formatu PNG URI danych i uwzględnić je w swoim SVG ten sposób.
Konwertuj pliki PNG blokerów na rzeczywiste elementy SVG, takie jak <path>.

Źródło

2016-12-17 05:49:31

Dlaczego jednak działa lokalnie? – sgruggy

Gdyby to była prawda, nie działałby on również wtedy, gdy przesyłałbym go do stron internetowych służących do hostingu obrazów, co zrobił. – sgruggy

Przeglądanie SVG w przeglądarce (np. Pliku '.svg') jest w porządku, ponieważ nie ładujesz go przez' '. To samo dotyczy sytuacji, w której witryna hostująca obraz hostuje i obsługuje plik '.svg' bezpośrednio, zamiast osadzać go za pomocą' '. –

-1

Zdarzyło mi się dowiedzieć, że Chrome [v 58.0.3029.81 (64-bit)] nie wyświetla obrazu wewnątrz pliku SVG, jeśli plik obrazu nie znajduje się w katalogu głównym html. .svg i osadzone pliki .png zostały umieszczone w/images -folder, zawartość .svg pojawiła się bezpośrednio w Chrome, ale nie w osadzonym pliku .png. Kiedy plik .png został skopiowany do (../) katalogu głównego html, Chrome działa.

Jednak Firefox [v 52.0.2 (32-bitowy)] wydaje się działać poprawnie, gdy pliki .svg i .png znajdują się w tym samym folderze/images.

Edycja: Właściwie w moim przypadku ładuję svg za pomocą metody d3.xml (..), aby uzyskać uchwyt js do rzeczywistych elementów svg.

Źródło

2017-04-20 17:42:54 mpeli

Obrazy w SVG Tagi graficzne nie wyświetlają się w Chrome, ale wyświetlają się lokalnie?

Odpowiedz

Powiązane problemy