> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# แปลงลาย SVG: หมุนสีเติมโดยเก็บเส้นขอบเดิม

> หมุนหรือเลื่อนลาย SVG ซ้ำในตราคงที่ด้วย patternTransform เทียบการหมุนทั้งวัตถุ และตรวจต้นฉบับ รูปทรง กับพิกเซลเบราว์เซอร์

Source: https://perfectvector.com/th/blog/svg-pattern-transform

Language: th
Author: Irene Kim
Published: 2026-10-05T08:00:00+09:00
Updated: 2026-10-05T08:00:00+09:00

หากต้องการหมุนลาย SVG ภายในรูปทรงคงที่ ให้ใส่ `patternTransform="rotate(...)"` บนองค์ประกอบ `pattern` คงการแปลงของรูปเองไว้ หากต้องการเลื่อนตำแหน่งภาพซ้ำ ให้ใช้การเลื่อนบนลายเดียวกันแทน

การแก้นี้ย้ายระบบพิกัดสี การหมุนกลุ่มที่มีรูปจะย้ายรูปทรงที่แสดงด้วย ตราโปร่งกลางต้นฉบับของเราแสดงความต่างชัด เส้นขอบยังตั้งตรงเมื่อสีหมุน ส่วนตัวควบคุมทั้งวัตถุแยกทำให้ตราและช่องเอียง

## เลือกองค์ประกอบที่ควรเคลื่อน

[เอกสาร patternTransform ปัจจุบัน](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternTransform) อธิบายรายการแปลงที่ใช้กับช่องลาย [นิยามลาย SVG2](https://www.w3.org/TR/SVG2/pservers.html#Patterns) อธิบายระบบพิกัดช่องและการแปลงสี

ในตัวอย่าง ลายย่อยเป็นรูปหักมุมไม่สมมาตรเล็กที่ซ้ำในช่อง 24 หน่วย ส่วนรูปที่รับสีเป็นอีกเส้น คือตราไม่สมมาตรมีช่องสี่เหลี่ยม แยกหน้าที่เหล่านี้ช่วยเลือกวิธีแก้ชัดขึ้น

| สิ่งที่อยากเปลี่ยน    | ตำแหน่งแอตทริบิวต์          | สิ่งที่ตรวจ                   |
| --------------------- | --------------------------- | ----------------------------- |
| หมุนพื้นที่ลายซ้ำ     | patternTransform บน pattern | ทิศลายและตารางช่อง            |
| เลื่อนตำแหน่งลายในตรา | patternTransform บน pattern | เฟสที่เส้นขอบและช่อง          |
| หมุนทั้งตรา           | transform บนกลุ่ม           | เส้นขอบ ช่อง และขอบเขตที่แสดง |

เราใช้แอตทริบิวต์ SVG โดยตรง หมายเหตุ MDN เรื่องการรองรับ CSS transform ไม่ได้รับปากว่าพร็อพเพอร์ตี CSS ชื่อ `pattern-transform` จะใช้ได้ที่ปลายทาง

**หมุนสีภายในเส้นขอบ**

![การเทียบแนวคิดตราโปร่งกลางตั้งตรงกับลายเรขาคณิตซ้ำ ก่อนและหลังหมุนสีภายในเส้นขอบคงที่](https://perfectvector.com/blog/svg-pattern-transform/fixed-outline-paint.webp)

*ภาพอธิบาย: เปลี่ยนลายสีซ้ำโดยคงเส้นขอบผู้รับ ไฟล์ SVG ต้นฉบับและตัวควบคุมเบราว์เซอร์ที่วัดด้านล่างให้หลักฐานรูปทรงและพิกเซลจริง*

## เปิดตัวอย่างหมุนสีครบชุด

บันทึก SVG นี้เป็น `pattern-emblem.svg` แล้วเปิดในเบราว์เซอร์ อยู่ครบในตัว ไม่พึ่งภาพหรือไลบรารีภายนอก ลายหมุน 30 องศารอบจุดต้นทาง `(100,80)` ส่วนกลุ่มรับไม่มีการแปลง

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
      <rect width="24" height="24" fill="#f4f0e4"/>
      <path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
    </pattern>
  </defs>
  <g>
    <path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
  </g>
</svg>
```

กฎเติม `evenodd` เว้นสี่เหลี่ยมในเป็นช่อง ดู[เอกสาร fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) สำหรับกฎอิงการตัดผ่าน ช่องเป็นส่วนของเส้นตรา การหมุนสีซ้ำจึงไม่หมุนช่องนั้น

ทั้ง `patternUnits` และ `patternContentUnits` ระบุชัดในต้นฉบับ [เอกสาร patternUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternUnits) นิยามระบบพิกัดช่อง [คู่มือหน่วยลาย](https://perfectvector.com/th/blog/svg-pattern-units) ครอบคลุมขนาดช่องและพิกัดลายละเอียด ที่นี่คงค่าเพื่อแยกผลการแปลง ไม่ใช่สูตรออกแบบลายซ้ำไร้รอยต่อ

## เทียบการหมุน การเลื่อน และตัวควบคุมรูปทรง

ทำสำเนาตัวอย่างสามไฟล์และเปลี่ยนเฉพาะแอตทริบิวต์ที่ระบุ:

1. สำหรับสีเดิม ลบ `patternTransform` จากลาย
2. สำหรับสีเลื่อน แทนด้วย `patternTransform="translate(7 5)"`
3. สำหรับตัวควบคุมทั้งวัตถุ ลบการแปลงลายและเพิ่ม `transform="rotate(20 100 80)"` ให้กลุ่มรับ `g`

สำเนาเลื่อนคงทิศลาย แต่เปลี่ยนว่าลายตกตรงไหนในตรา รูปที่ริมอาจเข้าหรือออกจากบริเวณสี สำเนาหมุนหมุนทั้งลายและตารางซ้ำพร้อมกัน ไม่ใช่แค่หมุนแต่ละรูปย่อยรอบกลางของตน

สำหรับตัวควบคุมวัตถุ [เอกสารแอตทริบิวต์ transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) อธิบายหมุนรอบจุดที่เลือก การแปลงนั้นเปลี่ยนการแสดงรูปทรงกลุ่ม สีลายปกติเดินตามไป หน่วยลายพื้นที่ผู้ใช้ไม่ได้ทำให้สีของตัวอย่างนี้อยู่นิ่งทั่วเอกสาร

เริ่มหนึ่งการแปลงเมื่อวินิจฉัยผล หากรวมหมุน เลื่อน และปรับขนาดภายหลัง ให้ตรวจลำดับใน[คู่มือลำดับแปลง SVG](https://perfectvector.com/th/blog/svg-transform-order) การรวมเพิ่มปัญหาพิกัดอีกเรื่องที่การเทียบควบคุมนี้หลีกเลี่ยง

## ตรวจรูปทรงกับพิกเซลแยกกัน

เราเรนเดอร์ต้นฉบับสี่แบบใน Chrome ที่ `200×160` และ `400×320` พิกเซล CSS device pixel ratio เป็น 2 แต่ละต้นฉบับยังถูกถอดรหัสและวาดลง canvas ที่ขนาดบัฟเฟอร์ตรงขนาดทดสอบ เพื่ออ่านพิกเซลโดยไม่พึ่งภาพหน้าจอ

ทุกไฟล์มีสตริง `d` ตราเดิมกับเส้นลายเดิม รวมสององค์ประกอบเส้นและไม่มีภาพ แฮชไฟล์เต็มต่างกันเพราะการแปลงต่างกัน กรอบรูปทรงเฉพาะที่ของตราคือ `(30,25,140,110)` ทุกกรณี

กรอบเฉพาะที่อย่างเดียวจะไม่จับการเปลี่ยนทั้งวัตถุ สำหรับตราหลายเหลี่ยมนี้ เรายังแปลงจุดนอกห้าจุดผ่านเมทริกซ์เบราว์เซอร์จริงแล้ววัดขอบเขตแสดง ตารางปรับ viewport ใหญ่กลับเป็นหน่วยต้นฉบับ:

| แบบ       | การแปลงลาย        | การแปลงกลุ่ม      | ขอบนอกที่แสดง x,y,กว้าง,สูง     |
| --------- | ----------------- | ----------------- | ------------------------------- |
| เดิม      | ไม่มี             | ไม่มี             | 30,25,140,110                   |
| หมุนสี    | rotate(30 100 80) | ไม่มี             | 30,25,140,110                   |
| เลื่อนสี  | translate(7 5)    | ไม่มี             | 30,25,140,110                   |
| หมุนวัตถุ | ไม่มี             | rotate(20 100 80) | ประมาณ 15.41,4.38,155.50,140.99 |

ขอบเขตหลังปรับตรงกันทั้งสองขนาด ตัวควบคุมวัตถุเก็บสตริง `d` เดิมแต่รูปทรงแสดงเปลี่ยน ความเท่ากันของข้อมูลต้นทางจึงเป็นหลักฐานว่าการสร้างเส้นยังอยู่ แต่ไม่เพียงพอว่าเส้นขอบที่เห็นอยู่นิ่ง

แบบที่เปลี่ยนเฉพาะสีมีบัฟเฟอร์พิกเซล canvas เต็มต่างจากเดิมทุกขนาด ที่จุดต้นทาง `(45,45)` ตัวอย่างเดิมเป็นพื้นช่อง `(244,240,228)` ส่วนแบบหมุนสีเป็นลายดินเผา `(193,90,56)` ทั้งคู่มีอัลฟา 255 การเลื่อนไม่เปลี่ยนจุดนั้นแม้บัฟเฟอร์รวมต่าง จุดตัวอย่างเดียวอาจพลาดการเลื่อนสี

ที่ต้นทาง `(85,80)` ช่องมีอัลฟาศูนย์ทั้งแปดกรณี ขอบเขตพิกเซลทึบเต็มก็ไม่เปลี่ยนสำหรับสามแบบตั้งตรงในแต่ละขนาด ขอบเขตพิกเซลผ่านเกณฑ์นั้นไม่ใช่การวัดเดียวกับขอบเขตจุดเส้นขอบตรงค่า ข้อสังเกตจำกัดตามต้นฉบับและเบราว์เซอร์ของเรา ไม่ใช่ใบรับรองความเข้ากันได้ของตัวเรนเดอร์

## ตรวจไฟล์ปลายทางที่บันทึกก่อนส่ง

เก็บตราเดิมเป็นอ้างอิงรูปทรง และการแต่งสีในสำเนาแยก เซิร์ฟเวอร์สีซ้ำไม่เปลี่ยนทุกลายที่เห็นเป็นรูปอิสระที่เครื่องตัดหรือโปรแกรมปลายทางเลือกได้ หากต้องการรูปทรงขยาย ให้เตรียมและตรวจการขยายนั้นแยก [คู่มือแก้ SVG](https://perfectvector.com/th/blog/how-to-edit-an-svg) ครอบคลุมการเปลี่ยนต้นฉบับวงกว้าง

หากเส้นขอบหมุนไม่คาดคิด ตรวจกลุ่มของมันกับการแปลงบรรพบุรุษก่อนปรับลาย หากหลายสำเนา inline แชร์สีโดยไม่ตั้งใจ ให้ ID ลายและการอ้าง fill คู่กันมีชื่อไม่ซ้ำ ตัวอย่างเทียบของเราแยก ID เหล่านี้ ไฟล์ SVG เดี่ยวแยกไม่แชร์พื้นที่ชื่อทรัพยากรระดับเอกสารเดียวกัน

หากลายย่อยหรือตราของคุณมีเพียง PNG หรือ JPG และต้องการเส้นขอบแก้ไขได้ ให้[เตรียม SVG ด้วย PerfectVector](https://perfectvector.com/th/image-to-vector) ตรวจเส้นและช่อง แล้วเก็บต้นฉบับสะอาด จากนั้นสร้างการซ้ำและเลือกการแปลงสีในโค้ด SVG การแปลงเวกเตอร์เตรียมภาพ ไม่ได้ออกแบบการซ้ำ เลือกเฟส หรือรับประกันการจัดลายปลายทาง เส้นสะอาดเดิมไปแก้ลายได้ตรง ๆ [คู่มือแปลงเวกเตอร์](https://perfectvector.com/th/blog/what-is-image-vectorization) อธิบายว่าเมื่อใดแปลงแรสเตอร์มีประโยชน์

## คำถามที่พบบ่อย

**patternTransform เปลี่ยนข้อมูลเส้นตราหรือไม่?**
ในตัวอย่างนี้มันแปลงสีลาย สตริง d ของตราไม่เปลี่ยน ตรวจกลุ่มรับกับการแปลงบรรพบุรุษด้วย เพราะรูปทรงแสดงเคลื่อนได้โดยไม่เปลี่ยน d

**เลื่อนลายโดยไม่หมุนได้หรือไม่?**
ได้ แบบ translate(7 5) เลื่อนตำแหน่งสีโดยคงทิศลาย คงขนาดช่องและรูปทรงรับไว้เมื่อทดสอบผล

**ทำไมลายหมุนตามเมื่อหมุนทั้งกลุ่ม?**
การแปลงกลุ่มเปลี่ยนรูปทรงรับที่แสดงกับสีของมัน เป็นคนละงานกับการใส่การแปลงเฉพาะองค์ประกอบ pattern

**ลายซ้ำเป็นเส้นแยกที่แก้ได้หรือไม่?**
ต้นฉบับมีหนึ่งเส้นลายในเซิร์ฟเวอร์สีและหนึ่งเส้นตรารับ ลายซ้ำที่เห็นไม่ใช่องค์ประกอบเส้นเขียนแยก ขยายและตรวจแยกหากปลายทางต้องการรูปแบบนั้น

## แหล่งข้อมูล

1. [MDN — patternTransform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternTransform) — รายการแปลงลายและหมายเหตุการรองรับแอตทริบิวต์
2. [W3C — ลาย SVG2](https://www.w3.org/TR/SVG2/pservers.html#Patterns) — ระบบพิกัดช่องและการแปลงสี
3. [MDN — fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — ช่องแบบคู่คี่ในเส้นรับ
4. [MDN — transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) — การหมุนรูปทรงกลุ่มที่แสดง
5. [MDN — patternUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternUnits) — ระบบพิกัดช่องชัดเจนที่คงไว้ในการเทียบ

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/svg-pattern-transform)
- [SVG.js: นำเข้างาน แก้พาธ และส่งออก SVG](https://perfectvector.com/th/blog/svgjs-import-export-artwork.md)
- [คำสั่งพาธ SVG แบบสัมพัทธ์: ติดตามจุดปัจจุบัน](https://perfectvector.com/th/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)