SVG pointsAtY 属性

SVG pointsAtY 属性用于获取或设置某个SVG元素上的某个点相对于用户坐标系的Y坐标。

语法

<element pointsAtY="number"></element>

值

• number：表示要获取或设置的点相对于用户坐标系的Y坐标。如果未设置该属性，则返回0。

说明

• SVG pointsAtY 属性只适用于某些具有方向属性的SVG元素，例如<marker>元素和<filter>元素中的<feSpotLight>元素。

• 该属性的取值范围为0到元素高度的像素数值，即0到height属性的值之间。

• 此属性必须与pointsAtX属性结合使用，以确定用户坐标中的点。

示例

<svg width="100" height="100">
  <marker id="marker-arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">
    <path d="M 0 0 L 10 5 L 0 10 z" fill="#000000" />
  </marker>
  <path d="M 10 50 L 90 50" stroke="#000000" marker-end="url(#marker-arrow)" />
  <script>
    const markerArrow = document.getElementById('marker-arrow');
    console.log(markerArrow.pointsAtY); // 输出 5
  </script>
</svg>

在上述示例中，我们使用<marker>元素的pointsAtY属性获取箭头的Y坐标。由于我们设置<marker>元素的refY属性为5，因此返回的值也是5。

参考链接

• SVG pointsAtY 属性