> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Transformacja wzoru SVG: obróć kolor, zachowaj kontur > Obróć lub przesuń powtarzane malowanie SVG w stałym znaku przez patternTransform. Porównaj obrót całego obiektu i sprawdź źródło, geometrię oraz piksele. Source: https://perfectvector.com/pl/blog/svg-pattern-transform Language: pl Author: Irene Kim Published: 2026-10-05T08:00:00+09:00 Updated: 2026-10-05T08:00:00+09:00 Aby obrócić wzór SVG wewnątrz nieruchomego kształtu, umieść `patternTransform="rotate(...)"` w elemencie `pattern`. Zachowaj transformację samego kształtu bez zmian. Aby przesunąć położenie powtarzanej grafiki, użyj translacji tego samego wzoru. Te edycje przesuwają układ współrzędnych malowania. Obrót grupy zawierającej kształt przesuwa również jego wyświetlaną geometrię. Nasz oryginalny pusty znak pokazuje różnicę: kontur pozostaje pionowy, gdy obraca się malowanie, a osobna kontrola całego obiektu pochyla znak wraz z otworem. ## Wybierz element, który ma się poruszyć Aktualny [opis patternTransform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternTransform) przedstawia listę transformacji stosowaną do kafelka wzoru. [Definicja wzoru SVG2](https://www.w3.org/TR/SVG2/pservers.html#Patterns) wyjaśnia układy współrzędnych kafelka i transformację malowania. W przykładzie motyw jest małym asymetrycznym zagiętym znakiem powtarzanym w kafelku o boku 24 jednostek. Kształt przyjmujący malowanie jest inną ścieżką: asymetryczną odznaką z prostokątnym otworem. Oddzielenie tych ról ułatwia wybór edycji. | Oczekiwana zmiana | Miejsce atrybutu | Co sprawdzić | | ------------------------------- | -------------------------- | ----------------------------------- | | Obrót pola powtarzanych motywów | patternTransform w pattern | Kierunek motywu i siatkę kafelków | | Przesunięcie motywów w odznace | patternTransform w pattern | Fazę na konturze i otworze | | Obrót całej odznaki | transform w jej grupie | Wyświetlany kontur, otwór i granice | Używamy bezpośrednio atrybutu SVG. Uwaga MDN o implementacji transformacji CSS nie obiecuje, że właściwość CSS o nazwie `pattern-transform` zadziała w miejscu docelowym. **Obróć malowanie wewnątrz konturu** ![Koncepcyjne porównanie pionowego pustego znaku z powtarzanymi motywami geometrycznymi przed obróceniem i po obróceniu malowania w stałym konturze](https://perfectvector.com/blog/svg-pattern-transform/fixed-outline-paint.webp) *Ilustracja: zmień powtarzane malowanie, zachowując kontur, który je przyjmuje. Oryginalne SVG i zmierzone kontrole przeglądarkowe poniżej dostarczają rzeczywistych dowodów geometrii i pikseli.* ## Otwórz kompletny przykład obrotu malowania Zapisz SVG jako `pattern-emblem.svg` i otwórz w przeglądarce. Jest samowystarczalny, bez zewnętrznego obrazu lub biblioteki. Wzór jest obrócony o 30 stopni wokół punktu źródłowego `(100,80)`; grupa przyjmująca nie ma transformacji. ```svg ``` Reguła wypełnienia `evenodd` pozostawia wewnętrzny prostokąt otwarty. Zobacz [opis fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) dla reguły opartej na przecięciach. Otwór należy do ścieżki znaku, więc obrót powtarzanego malowania go nie obraca. Zarówno `patternUnits`, jak i `patternContentUnits` są jawne w źródle. [Opis patternUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternUnits) definiuje układ współrzędnych kafelka. Nasz [poradnik jednostek wzoru](https://perfectvector.com/pl/blog/svg-pattern-units) szczegółowo opisuje wymiary kafelka i współrzędne motywu. Tutaj utrzymujemy je stałe, aby wyizolować transformację; to nie jest przepis na projektowanie bezszwowego powtórzenia. ## Porównaj obrót, przesunięcie i kontrolę geometrii Utwórz trzy kopie przykładu i zmień tylko wskazany atrybut: 1. Dla pierwotnego malowania usuń `patternTransform` ze wzoru. 2. Dla przesuniętego malowania zastąp go `patternTransform="translate(7 5)"`. 3. Dla kontroli całego obiektu usuń transformację wzoru i dodaj `transform="rotate(20 100 80)"` do przyjmującego elementu `g`. Przesunięta kopia zachowuje orientację motywu, ale zmienia jego położenie wewnątrz odznaki. Znak na granicy może wejść do malowanego kształtu lub z niego wyjść. Obrócona kopia obraca motyw wraz z siatką powtórzeń; nie jest to jedynie obracanie każdego motywu wokół jego środka. Dla kontroli obiektu [opis atrybutu transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) dokumentuje obrót wokół wybranego punktu. Transformacja zmienia sposób wyświetlania geometrii grupy. Jej zwykłe malowanie wzorem porusza się razem z nią; jednostki wzoru w przestrzeni użytkownika nie utrzymują tu malowania globalnie nieruchomo. Podczas diagnozy zacznij od jednej transformacji. Jeśli później połączysz obrót, przesunięcie i skalowanie, sprawdź kolejność w [poradniku kolejności transformacji SVG](https://perfectvector.com/pl/blog/svg-transform-order). Łączenie transformacji wprowadza osobne pytanie o współrzędne, którego unika to kontrolowane porównanie. ## Zweryfikuj geometrię i piksele oddzielnie Wyrenderowaliśmy cztery oryginalne warianty w Chrome przy `200×160` i `400×320` pikselach CSS. Współczynnik pikseli urządzenia wynosił 2. Każde źródło zostało też zdekodowane i narysowane na canvas, którego bufor odpowiadał wymiarom testu, co pozwalało odczytać piksele niezależnie od zrzutu. Każdy plik zawiera ten sam ciąg `d` znaku i tę samą ścieżkę motywu: dwa elementy ścieżek i żadnego obrazu. Skróty całych plików różnią się, bo różnią się transformacje. Lokalna obwiednia geometrii znaku wynosi `(30,25,140,110)` w każdym przypadku. Sama lokalna obwiednia nie wykryłaby zmiany całego obiektu. Dla tego wielokątnego znaku przekształciliśmy też pięć zewnętrznych wierzchołków rzeczywistą macierzą przeglądarki i zmierzyliśmy wyświetlany zasięg. Tabela normalizuje większy viewport do jednostek źródła: | Wariant | Transformacja wzoru | Transformacja grupy | Wyświetlany zasięg zewnętrzny x,y,szerokość,wysokość | | ---------------------- | ------------------- | ------------------- | ---------------------------------------------------- | | Oryginał | brak | brak | 30,25,140,110 | | Obrót malowania | rotate(30 100 80) | brak | 30,25,140,110 | | Przesunięcie malowania | translate(7 5) | brak | 30,25,140,110 | | Obrót obiektu | brak | rotate(20 100 80) | około 15.41,4.38,155.50,140.99 | Znormalizowane zasięgi zgadzały się w obu rozmiarach. Kontrola obiektu zachowuje ten sam ciąg `d`, ale wyświetlana geometria się zmienia. Równość danych źródłowych jest więc przydatnym dowodem zachowania konstrukcji ścieżki, lecz nie wystarcza do stwierdzenia, że widoczny kontur pozostał w miejscu. Dla wariantów zmieniających tylko malowanie pełne bufory pikseli canvas różniły się od oryginału w każdym rozmiarze. W punkcie źródła `(45,45)` oryginalna próbka była tłem kafelka `(244,240,228)`, a próbka obróconego malowania terakotowym motywem `(193,90,56)`, obie z alfa 255. Przesunięcie nie zmieniło tej konkretnej próbki, choć cały bufor był inny. Pojedynczy próbkowany punkt może przeoczyć przesunięcie malowania. W źródle `(85,80)` otwór miał alfa zero we wszystkich ośmiu przypadkach. Granice całkowicie nieprzezroczystych pikseli także nie zmieniły się dla trzech pionowych wariantów przy każdym rozmiarze; te progowane granice pikseli nie są tą samą miarą co dokładne zasięgi wierzchołków konturu. Obserwacje ograniczają się do naszego źródła i przeglądarki, nie są certyfikatem zgodności rendererów. ## Sprawdź zapisany wynik docelowy przed przekazaniem Zachowaj oryginalny znak jako odniesienie geometrii, a efekt malowania w oddzielnej kopii. Powtarzany serwer malowania nie zamienia każdego widocznego motywu w niezależny kształt, który dalsze urządzenie tnące lub edytor może zaznaczyć. Jeśli miejsce docelowe wymaga rozwiniętej geometrii, przygotuj i sprawdź rozwinięcie osobno. [Poradnik edycji SVG](https://perfectvector.com/pl/blog/how-to-edit-an-svg) obejmuje szersze zmiany źródła. Jeśli kontur niespodziewanie się obraca, sprawdź jego grupę i transformacje przodków przed dostosowaniem wzoru. Jeśli kilka kopii inline nieoczekiwanie współdzieli jedno malowanie, nadaj identyfikatorom wzorów i pasującym odwołaniom wypełnienia unikalne nazwy. Nasz przykład izoluje identyfikatory; oddzielne samodzielne SVG nie współdzielą przestrzeni nazw zasobów tego samego dokumentu. Jeśli własny motyw lub znak istnieje tylko jako PNG lub JPG i potrzebujesz edytowalnych konturów, [przygotuj SVG przez PerfectVector](https://perfectvector.com/pl/image-to-vector), sprawdź kontur oraz otwór i zachowaj czysty wzorzec. Potem zbuduj powtórzenie i wybierz transformację malowania w kodzie SVG. Wektoryzacja przygotowuje grafikę; nie projektuje powtórzenia, nie wybiera fazy i nie gwarantuje obsługi wzorów w miejscu docelowym. Istniejące czyste ścieżki mogą przejść od razu do edycji wzoru; [poradnik wektoryzacji](https://perfectvector.com/pl/blog/what-is-image-vectorization) wyjaśnia, kiedy konwersja rastra jest przydatna. ## Najczęstsze pytania **Czy patternTransform zmienia dane ścieżki mojego znaku?** W tym przykładzie przekształca malowanie wzoru. Ciąg d znaku pozostaje niezmieniony. Sprawdź też grupę przyjmującą i transformacje przodków, bo wyświetlana geometria może się poruszać bez zmiany d. **Czy mogę przesunąć wzór bez obrotu?** Tak. Wariant translate(7 5) przesuwa malowanie, zachowując orientację motywu. Zachowaj wymiary kafelka i geometrię przyjmującą podczas testowania efektu. **Dlaczego wzór też się obraca, gdy obracam całą grupę?** Transformacja grupy zmienia wyświetlaną geometrię przyjmującą i jej malowanie. To inna operacja niż umieszczenie transformacji tylko na elemencie pattern. **Czy powtarzane motywy są oddzielnymi edytowalnymi ścieżkami?** Nasze źródło ma jedną ścieżkę motywu w serwerze malowania i jedną ścieżkę znaku przyjmującego. Widoczne powtórzenia nie są osobno utworzonymi elementami ścieżek; rozwiń i sprawdź je oddzielnie, jeśli miejsce docelowe wymaga takiej postaci. ## Źródła 1. [MDN — patternTransform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternTransform) — Listy transformacji wzorów i uwaga o implementacji atrybutu. 2. [W3C — Wzory SVG2](https://www.w3.org/TR/SVG2/pservers.html#Patterns) — Układy współrzędnych kafelków i transformacja malowania. 3. [MDN — fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Otwór parzyste-nieparzyste w przyjmującej ścieżce. 4. [MDN — transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) — Obrót zastosowany do wyświetlanej geometrii grupy. 5. [MDN — patternUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternUnits) — Jawny układ współrzędnych kafelka zachowany w tym porównaniu. ## Explore - [Read the HTML article](https://perfectvector.com/pl/blog/svg-pattern-transform) - [SVG.js: import grafiki, edycja ścieżki i eksport SVG](https://perfectvector.com/pl/blog/svgjs-import-export-artwork.md) - [Względne polecenia ścieżek SVG: śledź bieżący punkt](https://perfectvector.com/pl/blog/svg-relative-path-commands.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)