Mam plik SVG z viewBox = "- 155,7 -99 510 510". Uważam, że przesunęło to ścieżki w podglądzie Mac OS X o -155,7 -99. kiedy otwieram SVG w programie Illustrator, ścieżki nie są wcale przesunięte. Jak mogę wyeksportować ten plik SVG, aby:
Próbowałem zmienić pozycję obszaru roboczego, ale początek viewbox nigdy nie wynosi 0,0.
Odpowiedzi:
Zrobiłem trochę badań nad plikami SVG i najwyraźniej viewbox nie jest elementem, który można eksportować za pośrednictwem programu Illustrator. Element viewbox jest zgodny tylko z niektórymi programami, które zdecydowały się użyć tego elementu lub nim manipulować. Niestety, Illustrator nie jest jednym z nich.
Jeśli plik SVG został zapisany w programie Illustrator bez opcji „Zachowaj możliwości edycji programu Illustrator”, możesz cofnąć proces. Wszelkie zmiany dokonane w danych pliku SVG zostaną odzwierciedlone w programie Illustrator, ale poprzez zmianę położenia i rozmiaru zarówno obszaru roboczego, jak i warstw w celu utworzenia pseudo-widoku.
Na razie wszystko, co możesz zrobić, to prace projektowe w programie Illustrator i cały dodatkowy kod do przesunięcia i pozycjonowania pola widzenia w danych pliku. Możesz stworzyć pseudo-viewbox, po prostu zmieniając szerokość Obszarów roboczych + Wysokość / X + Y, a następnie zmieniając także atrybuty Rozmiar i Pozycja obiektów. Ale nigdy nie będzie prawdziwego atrybutu viewbox, dopóki nie opublikują aktualizacji programu Illustrator z edytowalnymi funkcjami viewbox.
Trochę czytania o formacie SVG w programie Illustrator: Adobe Illustrator Zapisz w formacie SVG
Wpadłem na ten problem kilka razy i jedyną rzeczą, która kiedykolwiek pracowała dla mnie, by niezawodnie zresetować pole podglądu SVG do dokładnie 0, 0 podczas eksportowania z programu Illustrator, jest utworzenie nowego pustego dokumentu oraz skopiowanie i wklejenie do niego grafiki .
Lewy górny róg tego nietkniętego domyślnego obszaru roboczego zostanie wyeksportowany jako punkt 0, 0 pola widoku. Użyj inteligentnych przewodników ( cmd-u) lub alignokna, Align to Artboardaby rozpocząć pracę od dokładnie 0, 0.
Możesz bezpiecznie zmienić rozmiar obszaru roboczego w prawym dolnym rogu, ale sytuacja zacznie się nie udać, jeśli przesuniesz lewy górny róg. Przeniesienie lewego górnego rogu obszarów roboczych lub importowanie plików SVG do AI wydaje się powodować jakieś dziwne wewnętrzne rozłączenie między linijkami, obszarami roboczymi i jakimś niewidzialnym tajnym punktem początkowym viewbox znanym tylko Illustratorowi.
AFAICT, podobnie jak w przypadku większości rzeczy związanych z siecią lub nowymi technologiami, podejście Adobe do SVG polegało na zebraniu czegoś brutalnie razem, aby mogli się tym chwalić w komunikacie prasowym, a następnie pozostawić to błędne, niedokończone i niekochane, udając, że nie istnieje i trwa jak w 1998 roku.
viewboxzmienionych podczas eksportowania do SVG. Masz całkowitą rację, tworząc nowy dokument i kopiując całą kompozycję. Twoja odpowiedź powinna być oznaczona jako poprawna +1.
Preserve Illustrator Editing Capabilitiesza pierwszym razem, gdy zapisuję, na wypadek, gdy muszę wprowadzić więcej korekt, a potem, gdy myślę, że wszystko jest całkiem dobre, zapisuję je bez niego (wzrost rozmiaru pliku jest dość znaczący, więc będziesz musiał to zrobić this)
Wiem, że jest bardzo późno w temacie, ale miałem ten sam problem i zrobiłem następujące.
Mam nadzieję, że to pomaga komuś innemu.
width="<W>" height="<H>"do ulubionego edytora tekstu tagu SVG również pomaga (gdzie <W>i gdzie <H>byłyby liczby dziesiętne).
Miałem bardzo podobny problem, że moja sztuczna inteligencja SVG nie została wyśrodkowana i rozwinięta do pełnego okna przeglądarki, ponieważ AI ciągle zmienia rozmiar obszaru roboczego i zapomina o centrowaniu.
Jedynym sposobem, aby to naprawić, jest ostatni etap ręcznego przetwarzania w Inkscape.
Na koniec musisz ponownie zapisać plik SVG, ale użyj formatu „Zoptymalizowany plik SVG” w oknie dialogowym Zapisz jako. Pojawi się okno dialogowe dla opcji SVG i musisz włączyć „Włącz przeglądanie”.
Ponieważ wszystkie moje pliki SVG są ikonami tego samego rozmiaru, ten etap przetwarzania zajmuje tylko 1 minutę, ponieważ zawsze mam ten sam rozmiar płótna i obiektu. Ale tak, szkoda, że ten krok jest w ogóle potrzebny i powinien zostać naprawiony w AI.
Zrozumiałem to. Wreszcie! Jest na to prosty sposób. Tak jak:
<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>Problem polegał na tym, że podczas eksportowania obrazu z programu Illustrator (jak wiele osób) obszar roboczy nie jest zawarty w eksportowanym pliku SVG. Ścieżki nie mają na czym oprzeć swoich obliczeń.
W moim przypadku maksymalna wysokość moich obrazów wynosiła 100pxi musiałem oprzeć style CSS dla tych obrazów na podstawie ich szerokości i wysokości. W CSS używam vwjednostek lub po prostu starych, 100%jeśli SVG ma wypełnić przestrzeń bloku. Ładnie się skaluje. W ten sposób nie będziesz bałagan ustawiania szerokości i wysokości w CSS, aby upewnić się, że wyświetla się poprawnie.
Przejrzałem każde logo i ustawiłem wysokość na 100pxi pozwoliłem, aby szerokość automatycznie obliczyła na podstawie proporcji. Następnie dopasowuję obszar roboczy do logo, aby usunąć nieużywane miejsce.
Wybrałem prostokąt, wyłączyłem wypełnienie i obrys i upewniłem się, że ma dokładnie taki sam rozmiar jak obszar roboczy. Umieść ten pusty obiekt z tyłu. Teraz, kiedy eksportujesz, ścieżka będzie miała podstawę do pracy nad obliczeniami.
Aby to zrobić w kodzie, wydaje się, że możesz owinąć ścieżki w recti ustawić jego szerokość i wysokość, a następnie możesz ustawić viewBoxto samo (zachowaj proporcje obrazu takie same). Jak pokazano w powyższym przykładzie. Nie przetestowałem tego, ale przetestuję i zaktualizuję.
Udało mi się to naprawić za pomocą Inkscape . Wydaje się, że Illustrator ma słabą obsługę plików SVG.
