Łączenie z CSS w SVG osadzonym przez znacznik IMG

Mam stronę zawierającą kilka plików SVG. Aby zsynchronizować stylizację tych plików SVG, chciałem stworzyć pojedynczy arkusz stylów do przechowywania wszystkich informacji o stylizacji.Łączenie z CSS w SVG osadzonym przez znacznik IMG

Jednak przy uwzględnieniu SVG, jak poniżej, CSS nie zostanie zastosowany. Ktoś, kto ma rozwiązanie tego problemu, czy nie ma możliwości połączenia z innymi plikami (CSS) w pliku SVG, do którego odwołuje się <img src="..." />?

Zobacz przykładowy kod poniżej. Podczas ładowania pic.svg bezpośrednio w przeglądarce, wszystkie style zostają zastosowane i można zobaczyć zielony prostokąt. Ale po otwarciu page.htm wszystko, co zobaczysz, to czarny prostokąt. Więc oczywiście żaden ze zdefiniowanych stylów nie został zastosowany.

page.htm

<!DOCTYPE html> 
<html> 
<body> 
    <img src="pic.svg" style="width: 100px; height: 100px;" /> 
</body> 
</html>

pic.svg

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<?xml-stylesheet type="text/css" href="styles.css" ?> 
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 100 100" 
    > 
    <rect x="10" y="10" width="80" height="80" /> 
</svg>

styles.css

rect { 
    stroke: black; 
    fill: green; 
}

EDYTUJ

Z odpowiedzi, że przez krótki czas pojawił się tutaj, dostałem this link to the spec i następujący cytat. Moim zdaniem stwierdza, że powyższy kod powinien zadziałać!

Samodzielne dokumentu SVG osadzonych w dokumencie HTML lub XML z 'img', 'obiekt' (HTML) lub 'image' (SVG) Elementy

[...]

Powołując z linku „arkusze stylów zdefiniowanych w dowolnym miejscu odwołuje dokumentu SVG (w elementach typu lub atrybutów stylu, albo w zewnętrznych arkuszy stylów połączonych z instrukcją przetwarzania arkusza stylów) zastosowanie w całym dokumencie SVG, ale nie rób tego skaż dokument referencyjny (być może HTML lub XHTML). "

Źródło

2012-09-25 Sirko

Ze względu na ochronę prywatności obrazy muszą być samodzielnymi plikami. Możesz użyć CSS, jeśli kodujesz arkusz stylów jako uri danych. Na przykład.

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<?xml-stylesheet type="text/css" href="data:text/css;charset=utf-8;base64,cmVjdCB7IA0KICAgIHN0cm9rZTogYmxhY2s7DQogICAgZmlsbDogZ3JlZW47DQp9" ?> 
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 100 100" 
    > 
    <rect x="10" y="10" width="80" height="80" /> 
</svg>

Dostępne są różne online converters dla identyfikatorów URI danych.

Źródło

2012-09-25 15:09:37

Ale w takim przypadku ponownie miałbym jedną definicję stylu na plik SVG. A jak to się ma do opublikowanego wyciągu ze specyfikacji? – Sirko

Jeśli chcesz udostępnić definicje stylów, nie możesz użyć znaczników graficznych. Kwestie bezpieczeństwa mają tendencję do przesłonięcia wymagań specyfikacji, które generalnie nie uwzględniają takich rzeczy. –

Podobno oznacza to również, że nie można odwoływać się do zewnętrznych czcionek z plików SVG załadowanych za pomocą pliku HTML. –

Alternatywą jest użycie znacznika <object> w html: -

<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>

To wielki wstyd tag <img> nie będzie działać. Nie chcę się martwić o hakowanie z konwersją SVG do URI danych. Ma to związek z lukami w zabezpieczeniach między stronami przy pośrednim ładowaniu zasobów i korzystaniem z "Open Redirector".

Należy pamiętać, że w moim testowaniu ostatniej nocy metoda tagu <img> działa w IE10, ale ani w Chrome, ani w FireFox.

Nie wiem, dlaczego <object> jest dozwolone, a <img> nie jest. Niedopatrzenie?

Źródło

2013-08-23 09:24:14

Brak przeoczenia, chodzi o to, jakie ogólne oczekiwania ludzi dotyczą możliwości obrazu, tzn. To, co widzisz, jest za każdym razem. Znacznik object zawsze pozwalał na tworzenie złożonych treści skryptowalnych. –

Uwielbiam tę odpowiedź najlepiej, ponieważ czcionka, która pojawia się w moim SVG, doprowadza mnie do szału przez cały dzień! Dziękuję Ci! ... ale jak to napisałeś, złamał resztę mojego kodu HTML, dopóki nie zamknąłem go jak 'height =" 100 ">' potrzebował tagu zamykającego obiektu z jakiegoś powodu: http://scrabblehack.com/ –

Leon: Dzięki. Odpowiednio zaktualizowałem ten przykład. –

Łączenie z CSS w SVG osadzonym przez znacznik IMG

Odpowiedz

Powiązane problemy