2024年2月20日发(作者：汗闳)

SVG交互

可伸缩矢量图（Scalable Vector Graphics SVG）是一种基于 XML 的语言，用于绘制二维图形。不过，它的能力不局限于简单的静态矢量图形。本文展示了如何将交互元素加入到 SVG

文档中，使其可以对用户输入作出响应。

SVG 中的交互性可以分为三个领域 -- 链接、事件和脚本。本文将依次讨论这三个领域。

注意：要查看本技巧中的 SVG 文档，需要有一个 SVG 查看程序，可以在 参考资料中找到这种查看程序（还有一个包括所有相关文件的 .zip 文件）。

链接

最基本的交互形式是链接。在 SVG 中，通过一个 标签提供链接，这与 HTML 链接的方式几乎相同。将 标签与一个 xlink:href 属性结合使用便可以建立一个链接。在

和 标签之间的所有内容都作为链接的一部分。清单1展示了一个例子，它有三个元素，设置为链接到三个不同的 URL。 单击这里以在浏览器中查看它们。

文本、矩形和多边形元素都有到不同页面的链接，这表明所有 SVG 元素 -- 不管是文本、圆还是不规则的多边形 -- 都可以作为一个链接。注意，如果将鼠标移动到这些元素上面，指针会相应地发生改变，表明这是一个链接。

其功能与 HTML 中的 image map（或者 hotspot）基本上相同。不过，在 HMTL 中这会是一个很麻烦的过程，要用专门的软件在一个图像上手工绘制热点 -- 如果这个图像或者链接改变了，那么更新它们会非常麻烦。在 SVG 中，定义和维护链接则容易得多，这主要是因为链接可以随着 SVG 内容动态移动。

清单1. 链接

style="fill:lightgrey"/>

Click here

Or here

points="60 160,165 172,180 60,290 290,272 280,172 285,250 255"

style="fill:dimgrey"/>

Or even here

< /svg>

注意在多边形的 xlink 中使用的 target=new 属性。它指示查看程序在单击这个元素时打开一个新的浏览器窗口。

事件

SVG 支持鼠标单击、鼠标移动和鼠标按下这样的用户鼠标事件。清单2展示了一个例子：

清单2. 使用鼠标的交互性

< rect x="10" y="10" width="140" height="140" rx="5" ry="5"

style="fill:lightgrey">

begin="mouseover" end="mouseout"/>

< /rect>

< text x="200" y="75" font-size="30">Move over me and click

begin="mouseover" end="mouseout"/>

begin="mousedown" end="mouseup"/>

< /text>

< /svg>

单击这里以便观看效果。矩形和文本元素对不同的事件 -- 如移动鼠标和单击 -- 做出反应，产生一种简单的滚动效果。试着将鼠标移动到元素上面以观看这些效果。任何可以应用到元

素上的 SVG 属性 -- 如填充颜色、笔划宽度、大小和透明度 -- 都可以以这种方式改变。

文字元素可以对两种事件做出反应 -- mouseover 和 mousedown 。这表明可以对同一个元素指定多个事件。SVG 支持许多不同的事件 -- 有关所有事件类型的完整列表可以参看 参考资料中的 W3C 的 SVG 站点。

如果希望一个元素上的事件可以引发对另一个元素的操作，可以对 SVG 元素指定 id 属性，然后引用它们。清单3展示了一个例子。

清单3: 改变另一个元素的属性

ry="5" style="fill:lightgrey"/>

Move over for red text

ry="5" style="fill:lightgrey"/>

Move over for big text

ry="5" style="fill:lightgrey"/>

Click me for big red text

fill="black">Change me

begin="ver" end="ut"/>

begin="ver" end="ut"/>

begin="" end="ut"/>

begin="" end="ut"/>

< /svg>

单击这里可以在浏览器中观看效果。当鼠标移动到不同的矩形上时，文本就会改变。有三个矩形被指定了各自的 id 属性，文字的 set 元素通过“ ame ”引用这些属性。触发矩形的事件时，文本的属性就会相应地改变。

还可以用一个动画响应事件。清单4展示了这样的一个例子：

清单4. 开始一个动画

style="fill:red">

begin="click + 1s" dur="1s" fill="restore" />

begin="mouseover" dur="2s" fill="restore" />

< /svg>

单击这里以便观看效果。单击矩形时，它会淡出，在圆形上面移动鼠标时，它的颜色会改变。注意可以在 begin 属性中使用“ +Xs ”使动画延迟开始。

键按下

虽然 SVG 上的大部分交互是通过鼠标进行的，但是 SVG 也支持键盘输入。这是通过事件处理程序 accessKey 实现的，如清单5所示。

清单5. 捕获键按下

style="fill:red">

begin="accessKey(1)" dur="3s" fill="restore" />

style="fill:red">

from="0" to="90" begin="accessKey(2)" dur="3s"/>

style="fill:red">

begin="accessKey(3)" dur="3s" />

begin="accessKey(

)" dur="3s" fill="restore" />

< /svg>

单击这里以观看效果。三个矩形设置为响应键盘上的数字键 1、2 和 3。试一试按下每一个键，并观察图像相应的反应。

可以设置一个元素响应任意数量的不同的键。注意第三个矩形设置为监听两个键按下。第三个矩形上的第二个 accessKey 处理程序设置为监听键 ( ) -- 您可能认出它就是回车键(Enter)的标准 HTML 编码。要指定任何特殊字符或者空格字符，必须使用 &#XX 这样的 HTML

编码格式，其中 XX 是 ASCII 字符编码。

脚本

到目前为止我只讨论了用 SVG 支持的内置功能响应事件的基本方法。虽然可以只使用这些功能完成很多工作，但是要实现更高级的效果就需要使用脚本了。SVG 支持像 VBScript

和 JavaScript 这样的脚本语言，对于这里的例子，我将使用 JavaScript。

要让一个 SVG 对象对脚本中的事件作出响应，要在触发器名上加前缀 on ，这样 click

就变为 onclick ， mouseover 就变为 onmouseover ，等等。清单6展示了一个 SVG 脚本的例子。

清单6. 用 JavaScript 编写 SVG 脚本

< script type="text/javascript">

< ![CDATA[

var redVal=0;

var greenVal=0;

var blueVal=0;

function changeCol(evt)

{

var targetshape = get();

redVal = (()*255);

greenVal = (()*255);

blueVal = (()*255);

ribute("fill",

"rgb(" + redVal + "," + greenVal + "," + blueVal + ")");

}

// ]]>

< /script>

onclick="changeCol(evt)" />

< /svg>

下面逐步分析 清单6：

1. 编写 SVG 脚本的第一步是通知查看程序不再使用 SVG，而是使用脚本语言。还必须用

type 属性定义使用哪种脚本语言编码。在这里它设置为 text/javascript 。

2.

3. 现在就可以开始脚本了。首先，定义三个变量： redVal 、 greenVal 和 blueVal 。这些变量分别具有red、green 和 blue 值，它们将在函数中用到。这个函数名为 changeCol ，它带有一个参数 (evt)。 evt 是一个 SVG 保留字，它描述刚发生的事件。这里， evt 方法称为 getTarget()， 这个方法返回对触发该事件的 SVG 对象的一个引用。这个引用被存储在变量 targetShape 中。

4. 用简单的 JavaScript 函数 Math 生成三个值在 0 到 255 之间的随机数。

5. 最后，对 targetshape 调用 setAttribute 方法。用前一步中生成的三个随机数将该对象的

fill 属性设置为一个 RGB 值(如 rgb(150,200,50) )。

6. 关闭 CDATA 块和脚本后，返回 SVG。画出一个圆，通过 onClick 元素，在单击时让它调用函数 changeCol(evt)。

单击这里以便观看效果。单击这个圆时，每次单击它时填充都会变为一个随机颜色。

当一个函数要应用到多个 SVG 元素时，脚本是最有用的。例如，可以在清单6中添加一个矩形，如下所示：

onclick="changeCol(evt)" />

单击时，这个矩形会与前面的圆形一样调用同一个脚本改变其颜色。

要查看这一点，可以看一下 其他例子。如果查看源代码，您会看到三个方法： changeCol 、

changeEdge 和 resetEdge 。试着将鼠标移动矩形上面并单击。所有矩形都设置为响应

onclick 、 onmouseover 和 onmouseout 事件，它们为此调用的是同一个脚本函数。还要注意 onload 属性：第一次装载 SVG 文档时要调用这个属性，它对于您的 SVG 初始化很有用。

清单7. 编写文本变化的脚本

< script type="text/javascript">

< ![CDATA[

function changeText(evt)

{

targetXtext=mentById("XPos");

targetYtext=mentById("YPos");

var XPos = entX();

var YPos = entY();

var newXPosText = TextNode("X Position : " + XPos);

var newYPosText = TextNode("Y Position : " + YPos);

eChild(newXPosText,stChild());

eChild(newYPosText,stChild());

}

function changeTextNotOver(evt)

{

targetXtext=mentById("XPos");

targetYtext=mentById("YPos");

var newXPosText =

TextNode("X Position : Not over Rectangle");

var newYPosText =

TextNode("Y Position : Not over Rectangle");

eChild(newXPosText,stChild());

eChild(newYPosText,stChild());

}

function recordClick(evt)

{

targetClickText=mentById("ClickPos");

var XPos = entX();

var YPos = entY();

var newClickText =

TextNode("Last Click made at X=" + XPos + " Y=" + YPos);

eChild(newClickText,

stChild());

}

// ]]>

< /script>

< text id="XPos" x="50" y="50"

< text id="YPos" x="50" y="70"

< text id="ClickPos" x="50" y="90"

< rect x="50" y="100" width="200" height="200" style="fill:blue"

onmousemove="changeText(evt)" onmouseout="changeTextNotOver(evt)"

onclick="recordClick(evt)"/>

< /svg>

单击这里以便观看效果。将鼠标移动到矩形上面时，会显示鼠标的 X 和 Y 位置，并且这两个显示的值会随着鼠标的移动而改变，在矩形上单击鼠标会记录下单击的位置。

分析函数 changeText(evt) 可揭示创建交互文本的步骤：

1. 为所使用的每一个文本元素指定 id ，这样脚本就可以提取它们。

2. 第一次调用 mentById() ，其中传递的参数是要改变的文本元素的

ID。它被存储在一个变量中以供以后使用。

3. 调用 evt 方法 getClientX() 和 getClientY() 以得到指针的 X 和 Y 坐标，并将它们存储在变量 XPos 和 YPos 中。

4. 调用 TextNode() 创建一个新文本节点。将更新过的文本字符串传递给这个函数。

5. 最后，对这个文字元素调用 replaceChild 方法。它带两个参数 -- 替换文本节点和被替换的子元素。对 getFirstChild() 的调用保证更新的文本放置正确。

参照清单7，您应该可以将交互文本加入到自己的 SVG 文档中。

2024年2月20日发(作者：汗闳)

SVG交互

可伸缩矢量图（Scalable Vector Graphics SVG）是一种基于 XML 的语言，用于绘制二维图形。不过，它的能力不局限于简单的静态矢量图形。本文展示了如何将交互元素加入到 SVG

文档中，使其可以对用户输入作出响应。

SVG 中的交互性可以分为三个领域 -- 链接、事件和脚本。本文将依次讨论这三个领域。

注意：要查看本技巧中的 SVG 文档，需要有一个 SVG 查看程序，可以在 参考资料中找到这种查看程序（还有一个包括所有相关文件的 .zip 文件）。

链接

最基本的交互形式是链接。在 SVG 中，通过一个 标签提供链接，这与 HTML 链接的方式几乎相同。将 标签与一个 xlink:href 属性结合使用便可以建立一个链接。在

和 标签之间的所有内容都作为链接的一部分。清单1展示了一个例子，它有三个元素，设置为链接到三个不同的 URL。 单击这里以在浏览器中查看它们。

文本、矩形和多边形元素都有到不同页面的链接，这表明所有 SVG 元素 -- 不管是文本、圆还是不规则的多边形 -- 都可以作为一个链接。注意，如果将鼠标移动到这些元素上面，指针会相应地发生改变，表明这是一个链接。

其功能与 HTML 中的 image map（或者 hotspot）基本上相同。不过，在 HMTL 中这会是一个很麻烦的过程，要用专门的软件在一个图像上手工绘制热点 -- 如果这个图像或者链接改变了，那么更新它们会非常麻烦。在 SVG 中，定义和维护链接则容易得多，这主要是因为链接可以随着 SVG 内容动态移动。

清单1. 链接

style="fill:lightgrey"/>

Click here

Or here

points="60 160,165 172,180 60,290 290,272 280,172 285,250 255"

style="fill:dimgrey"/>

Or even here

< /svg>

注意在多边形的 xlink 中使用的 target=new 属性。它指示查看程序在单击这个元素时打开一个新的浏览器窗口。

事件

SVG 支持鼠标单击、鼠标移动和鼠标按下这样的用户鼠标事件。清单2展示了一个例子：

清单2. 使用鼠标的交互性

< rect x="10" y="10" width="140" height="140" rx="5" ry="5"

style="fill:lightgrey">

begin="mouseover" end="mouseout"/>

< /rect>

< text x="200" y="75" font-size="30">Move over me and click

begin="mouseover" end="mouseout"/>

begin="mousedown" end="mouseup"/>

< /text>

< /svg>

单击这里以便观看效果。矩形和文本元素对不同的事件 -- 如移动鼠标和单击 -- 做出反应，产生一种简单的滚动效果。试着将鼠标移动到元素上面以观看这些效果。任何可以应用到元

素上的 SVG 属性 -- 如填充颜色、笔划宽度、大小和透明度 -- 都可以以这种方式改变。

文字元素可以对两种事件做出反应 -- mouseover 和 mousedown 。这表明可以对同一个元素指定多个事件。SVG 支持许多不同的事件 -- 有关所有事件类型的完整列表可以参看 参考资料中的 W3C 的 SVG 站点。

如果希望一个元素上的事件可以引发对另一个元素的操作，可以对 SVG 元素指定 id 属性，然后引用它们。清单3展示了一个例子。

清单3: 改变另一个元素的属性

ry="5" style="fill:lightgrey"/>

Move over for red text

ry="5" style="fill:lightgrey"/>

Move over for big text

ry="5" style="fill:lightgrey"/>

Click me for big red text

fill="black">Change me

begin="ver" end="ut"/>

begin="ver" end="ut"/>

begin="" end="ut"/>

begin="" end="ut"/>

< /svg>

单击这里可以在浏览器中观看效果。当鼠标移动到不同的矩形上时，文本就会改变。有三个矩形被指定了各自的 id 属性，文字的 set 元素通过“ ame ”引用这些属性。触发矩形的事件时，文本的属性就会相应地改变。

还可以用一个动画响应事件。清单4展示了这样的一个例子：

清单4. 开始一个动画

style="fill:red">

begin="click + 1s" dur="1s" fill="restore" />

begin="mouseover" dur="2s" fill="restore" />

< /svg>

单击这里以便观看效果。单击矩形时，它会淡出，在圆形上面移动鼠标时，它的颜色会改变。注意可以在 begin 属性中使用“ +Xs ”使动画延迟开始。

键按下

虽然 SVG 上的大部分交互是通过鼠标进行的，但是 SVG 也支持键盘输入。这是通过事件处理程序 accessKey 实现的，如清单5所示。

清单5. 捕获键按下

style="fill:red">

begin="accessKey(1)" dur="3s" fill="restore" />

style="fill:red">

from="0" to="90" begin="accessKey(2)" dur="3s"/>

style="fill:red">

begin="accessKey(3)" dur="3s" />

begin="accessKey(

)" dur="3s" fill="restore" />

< /svg>

单击这里以观看效果。三个矩形设置为响应键盘上的数字键 1、2 和 3。试一试按下每一个键，并观察图像相应的反应。

可以设置一个元素响应任意数量的不同的键。注意第三个矩形设置为监听两个键按下。第三个矩形上的第二个 accessKey 处理程序设置为监听键 ( ) -- 您可能认出它就是回车键(Enter)的标准 HTML 编码。要指定任何特殊字符或者空格字符，必须使用 &#XX 这样的 HTML

编码格式，其中 XX 是 ASCII 字符编码。

脚本

到目前为止我只讨论了用 SVG 支持的内置功能响应事件的基本方法。虽然可以只使用这些功能完成很多工作，但是要实现更高级的效果就需要使用脚本了。SVG 支持像 VBScript

和 JavaScript 这样的脚本语言，对于这里的例子，我将使用 JavaScript。

要让一个 SVG 对象对脚本中的事件作出响应，要在触发器名上加前缀 on ，这样 click

就变为 onclick ， mouseover 就变为 onmouseover ，等等。清单6展示了一个 SVG 脚本的例子。

清单6. 用 JavaScript 编写 SVG 脚本

< script type="text/javascript">

< ![CDATA[

var redVal=0;

var greenVal=0;

var blueVal=0;

function changeCol(evt)

{

var targetshape = get();

redVal = (()*255);

greenVal = (()*255);

blueVal = (()*255);

ribute("fill",

"rgb(" + redVal + "," + greenVal + "," + blueVal + ")");

}

// ]]>

< /script>

onclick="changeCol(evt)" />

< /svg>

下面逐步分析 清单6：

1. 编写 SVG 脚本的第一步是通知查看程序不再使用 SVG，而是使用脚本语言。还必须用

type 属性定义使用哪种脚本语言编码。在这里它设置为 text/javascript 。

2.

3. 现在就可以开始脚本了。首先，定义三个变量： redVal 、 greenVal 和 blueVal 。这些变量分别具有red、green 和 blue 值，它们将在函数中用到。这个函数名为 changeCol ，它带有一个参数 (evt)。 evt 是一个 SVG 保留字，它描述刚发生的事件。这里， evt 方法称为 getTarget()， 这个方法返回对触发该事件的 SVG 对象的一个引用。这个引用被存储在变量 targetShape 中。

4. 用简单的 JavaScript 函数 Math 生成三个值在 0 到 255 之间的随机数。

5. 最后，对 targetshape 调用 setAttribute 方法。用前一步中生成的三个随机数将该对象的

fill 属性设置为一个 RGB 值(如 rgb(150,200,50) )。

6. 关闭 CDATA 块和脚本后，返回 SVG。画出一个圆，通过 onClick 元素，在单击时让它调用函数 changeCol(evt)。

单击这里以便观看效果。单击这个圆时，每次单击它时填充都会变为一个随机颜色。

当一个函数要应用到多个 SVG 元素时，脚本是最有用的。例如，可以在清单6中添加一个矩形，如下所示：

onclick="changeCol(evt)" />

单击时，这个矩形会与前面的圆形一样调用同一个脚本改变其颜色。

要查看这一点，可以看一下 其他例子。如果查看源代码，您会看到三个方法： changeCol 、

changeEdge 和 resetEdge 。试着将鼠标移动矩形上面并单击。所有矩形都设置为响应

onclick 、 onmouseover 和 onmouseout 事件，它们为此调用的是同一个脚本函数。还要注意 onload 属性：第一次装载 SVG 文档时要调用这个属性，它对于您的 SVG 初始化很有用。

清单7. 编写文本变化的脚本

< script type="text/javascript">

< ![CDATA[

function changeText(evt)

{

targetXtext=mentById("XPos");

targetYtext=mentById("YPos");

var XPos = entX();

var YPos = entY();

var newXPosText = TextNode("X Position : " + XPos);

var newYPosText = TextNode("Y Position : " + YPos);

eChild(newXPosText,stChild());

eChild(newYPosText,stChild());

}

function changeTextNotOver(evt)

{

targetXtext=mentById("XPos");

targetYtext=mentById("YPos");

var newXPosText =

TextNode("X Position : Not over Rectangle");

var newYPosText =

TextNode("Y Position : Not over Rectangle");

eChild(newXPosText,stChild());

eChild(newYPosText,stChild());

}

function recordClick(evt)

{

targetClickText=mentById("ClickPos");

var XPos = entX();

var YPos = entY();

var newClickText =

TextNode("Last Click made at X=" + XPos + " Y=" + YPos);

eChild(newClickText,

stChild());

}

// ]]>

< /script>

< text id="XPos" x="50" y="50"

< text id="YPos" x="50" y="70"

< text id="ClickPos" x="50" y="90"

< rect x="50" y="100" width="200" height="200" style="fill:blue"

onmousemove="changeText(evt)" onmouseout="changeTextNotOver(evt)"

onclick="recordClick(evt)"/>

< /svg>

单击这里以便观看效果。将鼠标移动到矩形上面时，会显示鼠标的 X 和 Y 位置，并且这两个显示的值会随着鼠标的移动而改变，在矩形上单击鼠标会记录下单击的位置。

分析函数 changeText(evt) 可揭示创建交互文本的步骤：

1. 为所使用的每一个文本元素指定 id ，这样脚本就可以提取它们。

2. 第一次调用 mentById() ，其中传递的参数是要改变的文本元素的

ID。它被存储在一个变量中以供以后使用。

3. 调用 evt 方法 getClientX() 和 getClientY() 以得到指针的 X 和 Y 坐标，并将它们存储在变量 XPos 和 YPos 中。

4. 调用 TextNode() 创建一个新文本节点。将更新过的文本字符串传递给这个函数。

5. 最后，对这个文字元素调用 replaceChild 方法。它带两个参数 -- 替换文本节点和被替换的子元素。对 getFirstChild() 的调用保证更新的文本放置正确。

参照清单7，您应该可以将交互文本加入到自己的 SVG 文档中。