SVG pointsAtX 属性

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML基语言，用于在Web上呈现图形。SVG可以创建、编辑和显示由矢量图形描述的图像和文档。

在SVG中，pointsAtX属性用于定义指向SVG元素的某个目标的X坐标。

语法

pointsAtX属性的语法如下：

<feSpotLight pointsAtX="value" .../>

pointsAtX属性是 <feSpotLight> 元素的属性，用于指定光源的X坐标。

属性值

pointsAtX属性的值可以是一个数字或一个百分比。

• 数字：表示元素的X坐标。正值表示X轴正方向，负值表示X轴负方向。
• 百分比：表示相对于SVG宽度的百分比值。允许的范围是从-100%到100%。

示例

以下示例演示了如何使用pointsAtX属性：

<svg width="200px" height="200px">

  <rect x="50" y="50" width="100" height="100" fill="orange" stroke="black" />

  <feSpotLight id="spotlight" pointsAtX="50" pointsAtY="150" x="0.5" y="0.5" z="1" />

  <circle cx="50" cy="25" r="5" fill="red"/>
  <circle cx="50" cy="175" r="5" fill="red"/>

  <circle cx="150" cy="25" r="5" fill="red"/>
  <circle cx="150" cy="175" r="5" fill="red"/>

</svg>

在上面的示例中，一个矩形被创建，而feSpotLight元素被用作光源。pointsAtX属性指定feSpotLight指向X坐标50。通过改变pointsAtX属性值，你可以调整光源的位置。

请注意，示例中的其他元素是为了更好地展示pointsAtX属性的效果，你可以根据自己的需求调整。