SVGMarkerElement

实例属性

此接口还继承了其父接口 SVGElement 的属性。

SVGMarkerElement.markerUnits 只读

返回一个 SVGAnimatedEnumeration 对象，具有以下值之一：

0

SVG_MARKERUNITS_UNKNOWN，表示 markerUnits 属性的值不是预定义的两个关键字之一。

1

SVG_MARKERUNITS_USERSPACEONUSE，表示 markerUnits 属性的值为关键字 userSpaceOnUse。

2

SVG_MARKERUNITS_STROKEWIDTH，表示 markerUnits 属性的值为关键字 strokeWidth。

SVGMarkerElement.markerWidth 只读

返回一个 SVGAnimatedLength 对象，其中包含 <marker> 视口（viewport）的宽度。

SVGMarkerElement.markerHeight 只读

返回一个 SVGAnimatedLength 对象，其中包含 <marker> 视口（viewport）的高度。

SVGMarkerElement.orientType 只读

返回一个 SVGAnimatedEnumeration 对象，具有以下值之一：

0

SVG_MARKER_ORIENT_UNKNOWN，表示 orient 属性的值不是预定义的两个关键字之一。

1

SVG_MARKERUNITS_ORIENT_AUTO，表示 orient 属性的值为关键字 auto。

2

SVG_MARKERUNITS_ORIENT_ANGLE，表示 orient 属性的值为一个 <angle> 或 <number> 值，指示角度。

SVGMarkerElement.orientAngle 只读

返回一个 SVGAnimatedAngle 对象，其中包含 orient 属性的角度值。

SVGMarkerElement.refX 只读

返回一个 SVGAnimatedLength 对象，其中包含 <marker> 元素的 refX 属性的值。

SVGMarkerElement.refY 只读

返回一个 SVGAnimatedLength 对象，其中包含 <marker> 元素的 refY 属性的值。

SVGMarkerElement.viewBox 只读

返回一个 SVGAnimatedRect 对象，其中包含一个 SVGRect，该对象包含 <marker> 元素上 viewBox 属性设置的值。

SVGMarkerElement.preserveAspectRatio 只读

返回一个 SVGPreserveAspectRatio 对象，其中包含 <marker> 视口（viewport）上 preserveAspectRatio 属性设置的值。

实例方法

此接口还继承了其父接口 SVGElement 的方法。

SVGMarkerElement.setOrientToAuto()

将 orient 属性的值设置为 auto。

SVGMarkerElement.setOrientToAngle()

将 orient 属性的值设置为特定的角度值。

示例

以下 SVG 将在示例中使用。

<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>

查找标记的宽度

markerWidth 属性返回一个 SVGAnimatedLength，其中包含一个 SVGLength，该对象的值是 markerWidth 属性的值。

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

更新方向角度

在下面的示例中，使用通过 SVGElement.createSVGAngle() 创建的 SVGAngle，使用 setOrientToAngle() 方法更新 orient 属性的值。

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

规范

浏览器兼容性