Pracuję nad projektem internetowym, który obejmuje dynamicznie generowaną mapę Stanów Zjednoczonych, kolorującą różne stany w oparciu o zestaw danych.
Ten plik SVG daje mi dobrą, pustą mapę Stanów Zjednoczonych i bardzo łatwo jest zmienić kolor każdego stanu. Trudność polega na tym, że przeglądarki IE nie obsługują SVG, więc aby móc korzystać z wygodnej składni, jaką oferuje svg, będę musiał przekonwertować go na JPG.
Idealnie chciałbym to zrobić tylko z biblioteką GD2, ale przydałby się również ImageMagick. Nie mam absolutnie pojęcia, jak to zrobić.
Rozważone zostanie każde rozwiązanie, które pozwoliłoby mi dynamicznie zmieniać kolory stanów na mapie USA. Najważniejsze jest to, że zmiana kolorów jest łatwa w locie i że jest to przeglądarka internetowa. Tylko rozwiązania PHP / Apache, proszę.
Odpowiedzi:
To zabawne, że o to zapytałeś, niedawno zrobiłem to dla strony mojej pracy i pomyślałem, że powinienem napisać tutorial ... Oto jak to zrobić z PHP / Imagick, który używa ImageMagick:
kroki zastępowania kolorów wyrażeń regularnych mogą się różnić w zależności od ścieżki svg xml oraz sposobu przechowywania wartości identyfikatora i koloru. Jeśli nie chcesz przechowywać pliku na serwerze, możesz wyprowadzić obraz jako podstawowy 64, taki jak
(przed użyciem wyczyść / zniszcz), ale np. ma problemy z PNG jako base64, więc prawdopodobnie będziesz musiał wypisać base64 jako jpeg
możesz zobaczyć tutaj przykład, który zrobiłem dla mapy obszaru sprzedaży byłego pracodawcy:
Start: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
Koniec:
Edytować
Od czasu napisania powyższego wymyśliłem 2 ulepszone techniki:
1) zamiast pętli regex, aby zmienić stan wypełnienia, użyj CSS, aby utworzyć reguły stylu, takie jak
a następnie możesz wykonać pojedynczą zamianę tekstu, aby wstrzyknąć swoje reguły css do svg przed kontynuowaniem tworzenia imagick jpeg / png. Jeśli kolory się nie zmieniają, sprawdź, czy w znacznikach ścieżki nie ma żadnych stylów wypełnienia wbudowanego, które przesłaniają css.
2) Jeśli nie musisz faktycznie tworzyć pliku obrazu jpeg / png (i nie musisz obsługiwać przestarzałych przeglądarek), możesz manipulować plikiem svg bezpośrednio za pomocą jQuery. Nie możesz uzyskać dostępu do ścieżek svg podczas osadzania svg za pomocą img lub tagów obiektu, więc musisz bezpośrednio dołączyć svg xml do html swojej strony internetowej, na przykład:
wtedy zmiana kolorów jest tak prosta, jak:
źródło
$dom = new DOMDocument(); $dom->loadXML( $svg ); $dom->getElementsByTagName('image')->item(0)->setAttribute('id', $state); $svg = $dom->saveXML();
Wspominasz, że robisz to, ponieważ IE nie obsługuje formatu SVG.
Dobrą wiadomością jest to, że IE robi grafiki wektorowej wsparcie. OK, więc jest w formie języka zwanego VML, który obsługuje tylko IE, a nie SVG, ale jest i możesz go używać.
Mapy Google, między innymi, wykryją możliwości przeglądarki, aby określić, czy mają obsługiwać SVG, czy VML.
Jest też biblioteka Raphael , która jest biblioteką graficzną opartą na przeglądarce Javascript, która obsługuje SVG lub VML, ponownie w zależności od przeglądarki.
Kolejny, który może pomóc: SVGWeb .
Wszystko to oznacza, że możesz wspierać użytkowników IE bez konieczności uciekania się do grafiki bitmapowej.
Zobacz także najlepszą odpowiedź na to pytanie, na przykład: XSL Transform SVG to VML
źródło
Konwertując SVG do przezroczystego PNG, nie zapomnij umieścić tego PRZED
$imagick->readImageBlob()
:źródło
To bardzo łatwe, pracowałem nad tym przez ostatnie kilka tygodni.
Potrzebujesz Batik SVG Toolkit . Pobierz i umieść pliki w tym samym katalogu, co plik SVG, który chcesz przekonwertować do formatu JPEG , a także upewnij się, że najpierw go rozpakujesz.
Otwórz terminal i uruchom to polecenie:
To powinno wyprowadzić JPEG z pliku SVG. Naprawdę proste. Możesz nawet umieścić go w pętli i przekonwertować wiele plików SVG,
źródło
Nie znam samodzielnego rozwiązania PHP / Apache, ponieważ wymagałoby to biblioteki PHP, która może odczytywać i renderować obrazy SVG. Nie jestem pewien, czy taka biblioteka istnieje - nie znam żadnej.
ImageMagick jest w stanie rasteryzować pliki SVG za pomocą wiersza poleceń lub powiązania PHP, IMagick , ale wydaje się, że ma wiele dziwactw i zewnętrznych zależności, jak pokazano np. W tym wątku na forum . Myślę, że to wciąż najbardziej obiecująca droga, to pierwsza rzecz, na którą bym spojrzał, gdybym był tobą.
źródło
Jest to metoda konwersji obrazu svg do gif przy użyciu standardowych narzędzi php GD
1) Umieszczasz obraz w elemencie canvas w przeglądarce:
Następnie przekonwertuj go na serwerze (ProcessPicture.php) z (domyślnego) png do gif i zapisz. (mogłeś również zapisać jako png, a następnie użyć imagepng zamiast obrazu gif):
źródło
Możesz użyć Raphaël — JavaScript Library i łatwo to osiągnąć. Będzie działać również w IE.
źródło
lub używając: potrace demo: Tool4dev.com
źródło