SVGSVGElement

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.

Giao diện SVGSVGElement cung cấp quyền truy cập vào các thuộc tính của phần tử <svg>, cũng như các phương thức để thao tác với chúng. Giao diện này còn chứa nhiều phương thức tiện ích thường dùng khác, chẳng hạn như các phép toán ma trận và khả năng kiểm soát thời điểm vẽ lại trên các thiết bị hiển thị trực quan.

EventTarget Node Element SVGElement SVGGraphicsElement SVGSVGElement

Thuộc tính phiên bản

Giao diện này cũng kế thừa các thuộc tính từ cha của nó, SVGGraphicsElement.

SVGSVGElement.x Read only

Một SVGAnimatedLength tương ứng với thuộc tính x của phần tử <svg> đã cho.

SVGSVGElement.y Read only

Một SVGAnimatedLength tương ứng với thuộc tính y của phần tử <svg> đã cho.

SVGSVGElement.width Read only

Một SVGAnimatedLength tương ứng với thuộc tính width của phần tử <svg> đã cho.

SVGSVGElement.height Read only

Một SVGAnimatedLength tương ứng với thuộc tính height của phần tử <svg> đã cho.

SVGSVGElement.viewBox Read only

Một SVGAnimatedRect tương ứng với thuộc tính viewBox của phần tử <svg> đã cho.

SVGSVGElement.preserveAspectRatio Read only

Một SVGAnimatedPreserveAspectRatio tương ứng với thuộc tính preserveAspectRatio của phần tử <svg> đã cho.

SVGSVGElement.pixelUnitToMillimeterX Deprecated

Một số thực (float) biểu thị kích thước của đơn vị pixel (theo định nghĩa của CSS2) theo trục x của khung nhìn, nằm trong khoảng từ 70dpi đến 120dpi, và trên các hệ thống hỗ trợ, có thể khớp với đặc điểm của phương tiện đích. Trên các hệ thống không thể biết kích thước pixel, một giá trị mặc định phù hợp sẽ được cung cấp.

SVGSVGElement.pixelUnitToMillimeterY Deprecated

Một số thực biểu thị kích thước của một đơn vị pixel theo trục y của khung nhìn.

SVGSVGElement.screenPixelToMillimeterX Deprecated

Các sự kiện giao diện người dùng (UI) trong DOM Level 2 cho biết vị trí màn hình mà sự kiện UI đã xảy ra. Khi trình duyệt thực sự biết kích thước vật lý của "đơn vị màn hình", thuộc tính float này sẽ thể hiện thông tin đó; nếu không, tác nhân người dùng sẽ cung cấp giá trị mặc định phù hợp (chẳng hạn như .28mm).

SVGSVGElement.screenPixelToMillimeterY Deprecated

Kích thước tương ứng của một pixel màn hình theo trục y của khung nhìn.

SVGSVGElement.useCurrentView Deprecated Non-standard

Chế độ xem ban đầu (tức là trước khi phóng to và di chuyển) của mảnh tài liệu SVG trong cùng hiện tại có thể là chế độ xem "chuẩn" (dựa trên các thuộc tính của phần tử <svg> như viewBox) hoặc chế độ xem "tùy chỉnh" (siêu liên kết đến một <view> hoặc phần tử cụ thể khác). Nếu chế độ xem ban đầu là "chuẩn", thuộc tính này là false. Nếu là "tùy chỉnh", thuộc tính này là true.

SVGSVGElement.currentView Deprecated Non-standard

Một SVGViewSpec xác định chế độ xem ban đầu (tức là trước khi phóng to và di chuyển) của mảnh tài liệu SVG trong cùng hiện tại. Ý nghĩa phụ thuộc vào tình huống: Nếu chế độ xem ban đầu là chế độ "chuẩn", thì:

  • các giá trị của viewBox, preserveAspectRatiozoomAndPan trong currentView sẽ khớp với giá trị của các thuộc tính DOM tương ứng trực tiếp trên SVGSVGElement
  • giá trị của transform trong currentView sẽ là null

Nếu chế độ xem ban đầu là liên kết vào phần tử <view>, thì:

  • các giá trị của viewBox, preserveAspectRatiozoomAndPan trong currentView sẽ tương ứng với các thuộc tính của phần tử <view> đã cho
  • giá trị của transform trong currentView sẽ là null

Nếu chế độ xem ban đầu là liên kết vào một phần tử khác (tức là khác với <view>), thì:

  • các giá trị của viewBox, preserveAspectRatiozoomAndPan trong currentView sẽ khớp với giá trị của các thuộc tính DOM tương ứng trực tiếp trên SVGSVGElement cho phần tử <svg> tổ tiên gần nhất
  • các giá trị của transform trong currentView sẽ là null

Nếu chế độ xem ban đầu là liên kết vào mảnh tài liệu SVG bằng mã định danh mảnh đặc tả view SVG (tức là #svgView(…)), thì:

  • các giá trị của viewBox, preserveAspectRatio, zoomAndPantransform trong currentView sẽ tương ứng với các giá trị từ mã định danh mảnh đặc tả view SVG
SVGSVGElement.currentScale

Trên phần tử <svg> ngoài cùng, thuộc tính float này cho biết hệ số tỉ lệ hiện tại so với chế độ xem ban đầu, tính đến các thao tác phóng to và di chuyển của người dùng. Các thuộc tính DOM currentScalecurrentTranslate tương đương với ma trận 2×3 [a b c d e f] = [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]. Nếu "phóng to" được bật (tức là zoomAndPan="magnify"), hiệu ứng như thể có một phép biến đổi bổ sung được đặt ở cấp ngoài cùng trên mảnh tài liệu SVG (tức là bên ngoài phần tử <svg> ngoài cùng).

SVGSVGElement.currentTranslate Read only

Một DOMPointReadOnly biểu thị hệ số dịch chuyển tính đến thao tác "phóng to" của người dùng tương ứng với phần tử <svg> ngoài cùng. Hành vi không xác định đối với các phần tử <svg> không ở cấp ngoài cùng.

Phương thức phiên bản

Giao diện này cũng kế thừa các phương thức từ cha của nó, SVGGraphicsElement.

SVGSVGElement.suspendRedraw() Deprecated

Nhận một giá trị thời gian chờ cho biết không nên vẽ lại cho đến khi:

lệnh gọi unsuspendRedraw() tương ứng đã được thực hiện, lệnh gọi unsuspendRedrawAll() đã được thực hiện, hoặc bộ đếm thời gian đã hết hạn.

Trong các môi trường không hỗ trợ tương tác (ví dụ: phương tiện in), thì không nên tạm hoãn vẽ lại. Các lệnh gọi suspendRedraw()unsuspendRedraw() nên, nhưng không bắt buộc, được thực hiện theo cặp cân bằng.

Để tạm hoãn các hành động vẽ lại trong khi một tập hợp thay đổi SVG DOM xảy ra, hãy đặt trước các thay đổi vào SVG DOM bằng một lệnh gọi phương thức tương tự như:

js
const suspendHandleID = suspendRedraw(maxWaitMilliseconds);

và theo sau các thay đổi bằng một lệnh gọi phương thức tương tự như:

js
unsuspendRedraw(suspendHandleID);

Lưu ý rằng có thể sử dụng nhiều lệnh gọi suspendRedraw() cùng lúc, và mỗi lệnh gọi như vậy được xử lý độc lập với các lệnh gọi suspendRedraw() khác.

SVGSVGElement.unsuspendRedraw() Deprecated

Hủy một suspendRedraw() đã chỉ định bằng cách cung cấp ID xử lý tạm hoãn duy nhất được trả về bởi lệnh gọi suspendRedraw() trước đó.

SVGSVGElement.unsuspendRedrawAll() Deprecated

Hủy tất cả các lệnh gọi phương thức suspendRedraw() đang hoạt động hiện tại. Phương thức này hữu ích nhất ở cuối một tập hợp lệnh gọi SVG DOM để đảm bảo rằng tất cả các lệnh gọi phương thức suspendRedraw() đang chờ xử lý đã bị hủy.

SVGSVGElement.forceRedraw() Deprecated

Trong các môi trường kết xuất hỗ trợ tương tác, buộc tác nhân người dùng vẽ lại ngay lập tức tất cả các vùng của khung nhìn cần cập nhật.

SVGSVGElement.pauseAnimations()

Tạm dừng tất cả các hoạt hình đang chạy hiện tại được xác định trong mảnh tài liệu SVG tương ứng với phần tử <svg> này, khiến đồng hồ hoạt hình tương ứng với mảnh tài liệu này đứng yên cho đến khi được tiếp tục.

SVGSVGElement.unpauseAnimations()

Tiếp tục các hoạt hình đang chạy hiện tại được xác định trong mảnh tài liệu SVG, khiến đồng hồ hoạt hình tiếp tục từ thời điểm nó bị tạm dừng.

SVGSVGElement.animationsPaused()

Trả về true nếu mảnh tài liệu SVG này đang ở trạng thái tạm dừng.

SVGSVGElement.getCurrentTime()

Trả về thời gian hiện tại tính bằng giây so với thời gian bắt đầu của mảnh tài liệu SVG hiện tại. Nếu getCurrentTime() được gọi trước khi dòng thời gian tài liệu bắt đầu (ví dụ: bởi script chạy trong phần tử <script> trước khi sự kiện SVGLoad của tài liệu được gửi đi), thì 0 được trả về.

SVGSVGElement.setCurrentTime()

Điều chỉnh đồng hồ cho mảnh tài liệu SVG này, thiết lập một thời gian hiện tại mới. Nếu setCurrentTime() được gọi trước khi dòng thời gian tài liệu bắt đầu (ví dụ: bởi script chạy trong phần tử <script> trước khi sự kiện SVGLoad của tài liệu được gửi đi), thì giá trị giây trong lần gọi cuối cùng của phương thức sẽ là thời gian mà tài liệu sẽ tua tới khi dòng thời gian tài liệu bắt đầu.

SVGSVGElement.getIntersectionList()

Trả về một NodeList các phần tử đồ họa có nội dung kết xuất giao nhau với hình chữ nhật được cung cấp. Mỗi phần tử đồ họa ứng viên chỉ được coi là khớp nếu cùng phần tử đồ họa đó có thể là đích của sự kiện con trỏ như được xác định trong quá trình xử lý pointer-events.

SVGSVGElement.getEnclosureList()

Trả về một NodeList các phần tử đồ họa có nội dung kết xuất hoàn toàn nằm trong hình chữ nhật được cung cấp. Mỗi phần tử đồ họa ứng viên chỉ được coi là khớp nếu cùng phần tử đồ họa đó có thể là đích của sự kiện con trỏ như được xác định trong quá trình xử lý pointer-events.

SVGSVGElement.checkIntersection()

Trả về true nếu nội dung kết xuất của phần tử đã cho giao nhau với hình chữ nhật được cung cấp. Mỗi phần tử đồ họa ứng viên chỉ được coi là khớp nếu cùng phần tử đồ họa đó có thể là đích của sự kiện con trỏ như được xác định trong quá trình xử lý pointer-events.

SVGSVGElement.checkEnclosure()

Trả về true nếu nội dung kết xuất của phần tử đã cho hoàn toàn nằm trong hình chữ nhật được cung cấp. Mỗi phần tử đồ họa ứng viên chỉ được coi là khớp nếu cùng phần tử đồ họa đó có thể là đích của sự kiện con trỏ như được xác định trong quá trình xử lý pointer-events.

SVGSVGElement.deselectAll()

Bỏ chọn tất cả các đối tượng đang được chọn, bao gồm mọi lựa chọn chuỗi văn bản và thanh nhập liệu.

SVGSVGElement.createSVGNumber()

Tạo một đối tượng SVGNumber bên ngoài bất kỳ cây tài liệu nào. Đối tượng được khởi tạo thành 0.

SVGSVGElement.createSVGLength()

Tạo một đối tượng SVGLength bên ngoài bất kỳ cây tài liệu nào. Đối tượng được khởi tạo thành 0 đơn vị người dùng.

SVGSVGElement.createSVGAngle()

Tạo một đối tượng SVGAngle bên ngoài bất kỳ cây tài liệu nào. Đối tượng được khởi tạo với giá trị 0 độ (không có đơn vị).

SVGSVGElement.createSVGPoint()

Tạo một đối tượng DOMPoint bên ngoài bất kỳ cây tài liệu nào. Đối tượng được khởi tạo tại điểm (0,0) trong hệ tọa độ người dùng.

SVGSVGElement.createSVGMatrix()

Tạo một đối tượng DOMMatrix bên ngoài bất kỳ cây tài liệu nào. Đối tượng được khởi tạo thành ma trận đơn vị.

SVGSVGElement.createSVGRect()

Tạo một đối tượng SVGRect bên ngoài bất kỳ cây tài liệu nào. Đối tượng được khởi tạo sao cho tất cả các giá trị được đặt thành 0 đơn vị người dùng.

SVGSVGElement.createSVGTransform()

Tạo một đối tượng SVGTransform bên ngoài bất kỳ cây tài liệu nào. Đối tượng được khởi tạo thành phép biến đổi ma trận đơn vị (SVG_TRANSFORM_MATRIX).

SVGSVGElement.createSVGTransformFromMatrix()

Tạo một đối tượng SVGTransform bên ngoài bất kỳ cây tài liệu nào. Đối tượng được khởi tạo thành phép biến đổi ma trận đã cho (tức là SVG_TRANSFORM_MATRIX). Các giá trị từ tham số ma trận được sao chép; tham số ma trận không được áp dụng là SVGTransform::matrix.

SVGSVGElement.getElementById()

Tìm kiếm trong mảnh tài liệu SVG này (tức là, tìm kiếm được giới hạn trong một tập con của cây tài liệu) một phần tử có id bằng với elementId. Nếu tìm thấy phần tử, phần tử đó sẽ được trả về. Nếu không tồn tại phần tử như vậy, trả về null. Hành vi không xác định nếu có nhiều hơn một phần tử có id này.

Trình xử lý sự kiện

Các thuộc tính trình xử lý sự kiện onXYZ của Window sau đây cũng có sẵn dưới dạng bí danh nhắm đến đối tượng window. Tuy nhiên, nên lắng nghe chúng trực tiếp trên đối tượng window thay vì trên SVGSVGElement.

Note: Sử dụng addEventListener() trên SVGSVGElement sẽ không hoạt động đối với các trình xử lý sự kiện onXYZ được liệt kê bên dưới. Hãy lắng nghe các sự kiện trên đối tượng window thay thế.

SVGSVGElement.onafterprint

Được kích hoạt sau khi tài liệu liên kết đã bắt đầu in hoặc bản xem trước in đã đóng.

SVGSVGElement.onbeforeprint

Được kích hoạt khi tài liệu liên kết sắp được in hoặc xem trước để in.

SVGSVGElement.onbeforeunload

Được kích hoạt khi cửa sổ, tài liệu và tài nguyên của nó sắp được giải phóng.

SVGSVGElement.ongamepadconnected

Được kích hoạt khi trình duyệt phát hiện một tay cầm trò chơi đã kết nối hoặc lần đầu tiên một nút/trục của tay cầm được sử dụng.

SVGSVGElement.ongamepaddisconnected

Được kích hoạt khi trình duyệt phát hiện một tay cầm trò chơi đã ngắt kết nối.

SVGSVGElement.onhashchange

Được kích hoạt khi mã định danh mảnh của URL đã thay đổi (phần URL bắt đầu và theo sau ký hiệu #).

SVGSVGElement.onlanguagechange

Được kích hoạt khi ngôn ngữ ưa thích của người dùng thay đổi.

SVGSVGElement.onmessage

Được kích hoạt khi cửa sổ nhận được tin nhắn, ví dụ từ lệnh gọi Window.postMessage() từ ngữ cảnh duyệt web khác.

SVGSVGElement.onmessageerror

Được kích hoạt khi cửa sổ nhận được tin nhắn không thể giải mã.

SVGSVGElement.onoffline

Được kích hoạt khi trình duyệt mất quyền truy cập mạng và giá trị của Navigator.onLine chuyển sang false.

SVGSVGElement.ononline

Được kích hoạt khi trình duyệt có quyền truy cập mạng và giá trị của Navigator.onLine chuyển sang true.

SVGSVGElement.onpagehide

Được kích hoạt khi trình duyệt ẩn trang hiện tại trong quá trình hiển thị trang khác từ lịch sử phiên.

SVGSVGElement.onpageshow

Được kích hoạt khi trình duyệt hiển thị tài liệu của cửa sổ do điều hướng.

SVGSVGElement.onpopstate

Được kích hoạt khi mục nhập lịch sử đang hoạt động thay đổi trong khi người dùng điều hướng lịch sử phiên.

SVGSVGElement.onrejectionhandled

Được kích hoạt mỗi khi một Promise JavaScript bị từ chối và việc từ chối đã được xử lý.

SVGSVGElement.onstorage

Được kích hoạt khi một vùng lưu trữ (localStorage) đã được sửa đổi trong ngữ cảnh của tài liệu khác.

SVGSVGElement.onunhandledrejection

Được kích hoạt mỗi khi một Promise bị từ chối nhưng việc từ chối không được xử lý.

SVGSVGElement.onunload

Được kích hoạt khi tài liệu đang được giải phóng.

Thông số kỹ thuật

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGSVGElement

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

Xem thêm