<pattern>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Phần tử <pattern> của SVG định nghĩa một đối tượng đồ họa có thể được vẽ lại theo các khoảng cách tọa độ x và y lặp lại ("tile") để bao phủ một vùng.

Phần tử <pattern> được tham chiếu bởi các thuộc tính fill và/hoặc stroke trên các phần tử đồ họa khác để tô hoặc vẽ viền cho các phần tử đó bằng pattern được tham chiếu.

Ngữ cảnh sử dụng

Categories	Container element
Permitted content	Any number of the following elements, in any order: Animation elements Descriptive elements Gradient elements Shape elements Structural elements `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Thuộc tính

height: Thuộc tính này xác định chiều cao của tile pattern. Kiểu giá trị: <length>; Giá trị mặc định: 0; Có thể hoạt ảnh: có
href: Thuộc tính này tham chiếu một pattern mẫu cung cấp các giá trị mặc định cho các thuộc tính của <pattern>. Kiểu giá trị: <URL>; Giá trị mặc định: không có; Có thể hoạt ảnh: có
patternContentUnits: Thuộc tính này định nghĩa hệ tọa độ cho nội dung của <pattern>. Kiểu giá trị: userSpaceOnUse | objectBoundingBox; Giá trị mặc định: userSpaceOnUse; Có thể hoạt ảnh: có

Note: Thuộc tính này không có tác dụng nếu thuộc tính viewBox được chỉ định trên phần tử <pattern>.
patternTransform: Thuộc tính này chứa định nghĩa của một phép biến đổi bổ sung tùy chọn từ hệ tọa độ của pattern sang hệ tọa độ đích. Kiểu giá trị: <transform-list>; Giá trị mặc định: identity transform; Có thể hoạt ảnh: có
patternUnits: Thuộc tính này định nghĩa hệ tọa độ cho các thuộc tính x, y, width, và height. Kiểu giá trị: userSpaceOnUse | objectBoundingBox; Giá trị mặc định: objectBoundingBox; Có thể hoạt ảnh: có
preserveAspectRatio: Thuộc tính này định nghĩa cách fragment SVG phải bị biến dạng nếu nó được nhúng trong một container có aspect ratio khác. Kiểu giá trị: (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; Giá trị mặc định: xMidYMid meet; Có thể hoạt ảnh: có
viewBox: Thuộc tính này định nghĩa ranh giới của viewport SVG cho fragment pattern. Kiểu giá trị: <list-of-numbers>; Giá trị mặc định: none; Có thể hoạt ảnh: có
width: Thuộc tính này xác định chiều rộng của tile pattern. Kiểu giá trị: <length>; Giá trị mặc định: 0; Có thể hoạt ảnh: có
x: Thuộc tính này xác định độ dịch chuyển tọa độ x của tile pattern. Kiểu giá trị: <length>; Giá trị mặc định: 0; Có thể hoạt ảnh: có
xlink:href Deprecated: Thuộc tính này tham chiếu một pattern mẫu cung cấp các giá trị mặc định cho các thuộc tính của <pattern>. Kiểu giá trị: <URL>; Giá trị mặc định: không có; Có thể hoạt ảnh: có

Note: Với các trình duyệt triển khai href, nếu cả href và xlink:href đều được đặt, xlink:href sẽ bị bỏ qua và chỉ href được dùng.
y: Thuộc tính này xác định độ dịch chuyển tọa độ y của tile pattern. Kiểu giá trị: <length>; Giá trị mặc định: 0; Có thể hoạt ảnh: có

Giao diện DOM

Phần tử này triển khai giao diện SVGPatternElement.

Ví dụ

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
    </pattern>
  </defs>

  <circle cx="50" cy="50" r="50" fill="url(#star)" />
  <circle
    cx="180"
    cy="50"
    r="40"
    fill="none"
    stroke-width="20"
    stroke="url(#star)" />
</svg>

Đặc tả

Specification
Scalable Vector Graphics (SVG) 2 # PatternElement

Tương thích trình duyệt

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content