电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: JavaScript 的新领域 - 动态图片处理（SVG）-7 [打印本页]

作者: look_w 时间: 2018-9-23 12:38 标题: JavaScript 的新领域 - 动态图片处理（SVG）-7

在 SVG 中嵌入文字需要使用 text 元素。x 和 y 属性用于控制文字的位置，x 为左端的坐标，y 为下端的坐标。
当然，以上只是模拟了单选钮响应鼠标点击的外观，真正的控件还必须包括读和写数据。为此，我们将扩展上面的例子，提供一个可以单独使用的“单选钮”。
图 3. 更完善的模拟的单选钮

实现这样一个单选钮的代码，因为较长，附在参考资源中。代码中有详细的注释。
最后，为了展示 SVG 能创造的生动图形应用的可能性，这里给出一个更加复杂和有趣的例子。一个圆、两个点和一段弧线构成的表情是互联网上著名的符号。这个简单的图形不仅可以轻易被看成一张脸，而且通过改变弧线的形状，还可以表现从笑脸到哭脸的不同表情。它显示了人脑识别人脸的复杂行为是以模块和模糊的方式进行的，这种抽象的处理方式也为展现 SVG 的功能提供了一个良好的场合。我们先画出这样一张高度简化的脸，再创建一个滑动条控件，最后用拖动滑动条的方式来控制脸中弧线的弯曲程度和方向。如果把滑块的高度解释成象征一个人的压力，那么我们就看到了随着压力的改变，人的表情是如何变化的。此代码较长，可以在参考资源中下载。
图 4. 一个更复杂的例子

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)