SVGMarkerElement

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ừ giao diện cha, SVGElement.

SVGMarkerElement.markerUnits Read only

Trả về một đối tượng SVGAnimatedEnumeration, với một trong các giá trị sau:

0

SVG_MARKERUNITS_UNKNOWN nghĩa là thuộc tính markerUnits có giá trị khác với hai từ khóa được xác định trước.

1

SVG_MARKERUNITS_USERSPACEONUSE nghĩa là thuộc tính markerUnits có giá trị từ khóa userSpaceOnUse.

2

SVG_MARKERUNITS_STROKEWIDTH nghĩa là thuộc tính markerUnits có giá trị từ khóa strokeWidth.

SVGMarkerElement.markerWidth Read only

Trả về một đối tượng SVGAnimatedLength chứa chiều rộng của khung nhìn <marker>.

SVGMarkerElement.markerHeight Read only

Trả về một đối tượng SVGAnimatedLength chứa chiều cao của khung nhìn <marker>.

SVGMarkerElement.orientType Read only

Trả về một đối tượng SVGAnimatedEnumeration, với một trong các giá trị sau:

0

SVG_MARKER_ORIENT_UNKNOWN nghĩa là thuộc tính orient có giá trị khác với hai từ khóa được xác định trước.

1

SVG_MARKERUNITS_ORIENT_AUTO nghĩa là thuộc tính orient có giá trị từ khóa auto.

2

SVG_MARKERUNITS_ORIENT_ANGLE nghĩa là thuộc tính orient có giá trị <angle> hoặc <number> chỉ định góc xoay.

SVGMarkerElement.orient

Một chuỗi xác định cách điểm đánh dấu được xoay khi đặt tại vị trí của nó trên hình. Nó phản ánh thuộc tính orient của phần tử <marker>.

SVGMarkerElement.orientAngle Read only

Trả về một đối tượng SVGAnimatedAngle chứa góc của thuộc tính orient.

SVGMarkerElement.refX Read only

Trả về một đối tượng SVGAnimatedLength chứa giá trị của thuộc tính refX của phần tử <marker>.

SVGMarkerElement.refY Read only

Trả về một đối tượng SVGAnimatedLength chứa giá trị của thuộc tính refY của phần tử <marker>.

SVGMarkerElement.viewBox Read only

Trả về một đối tượng SVGAnimatedRect chứa một SVGRect bao gồm các giá trị được đặt bởi thuộc tính viewBox trên phần tử <marker>.

SVGMarkerElement.preserveAspectRatio Read only

Trả về một đối tượng SVGPreserveAspectRatio chứa các giá trị được đặt bởi thuộc tính preserveAspectRatio trên khung nhìn phần tử <marker>.

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ừ giao diện cha, SVGElement.

SVGMarkerElement.setOrientToAuto()

Đặt giá trị của thuộc tính orient thành auto.

SVGMarkerElement.setOrientToAngle()

Đặt giá trị của thuộc tính orient thành một giá trị góc cụ thể.

Ví dụ

SVG sau sẽ được dùng trong các ví dụ.

<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="90">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>

Tìm chiều rộng của điểm đánh dấu

Thuộc tính markerWidth trả về một SVGAnimatedLength chứa một SVGLength với giá trị của thuộc tính markerWidth.

let marker = document.getElementById("arrow");
console.log(marker.markerWidth.baseVal.value); // 6

Cập nhật góc hướng

Trong ví dụ sau, giá trị của thuộc tính orient được cập nhật bằng setOrientToAngle() sử dụng một SVGAngle được tạo bởi SVGSVGElement.createSVGAngle().

let svg = document.getElementById("svg");
let marker = document.getElementById("arrow");
console.log(marker.orientAngle.baseVal.value); // value in SVG above - 90
let angle = svg.createSVGAngle();
angle.value = "110";
marker.setOrientToAngle(angle);
console.log(marker.orientAngle.baseVal.value); // new value - 110

Thông số kỹ thuật

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