svg text参考

最新推荐文章于 2025-06-20 13:43:15 发布

原创最新推荐文章于 2025-06-20 13:43:15 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

SVG学习专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何在SVG图形中使用JavaScript实现鼠标移动时显示坐标的功能，并提供了地图缩放、平移和还原的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.w3.org/TR/SVG11/text.html#TextElement

4.4 坐标的显示
在每个<g>图层中加入onmousemove="changeText(evt)"，通过javascript编写changeText(evt)函数，从而实现图形坐标的显示。
function changeText(evt)
{
targetXtext=svgDocument.getElementById("XPos");
targetYtext=svgDocument.getElementById("YPos");
var XPos = evt.getClientX();
var YPos = evt.getClientY();

var newXPosText = svgDocument.createTextNode("X 坐标 : " + XPos);
var newYPosText = svgDocument.createTextNode("Y 坐标 : " + YPos);
targetXtext.replaceChild(newXPosText,targetXtext.getFirstChild());
targetYtext.replaceChild(newYPosText,targetYtext.getFirstChild());
}

地图的缩放、平移和还原
function OriginView()
{
RecordViewBox();
var docSVG = document.HUNNUWebGIS_SVG.getSVGDocu ment();
var eSVG = docSVG.getDocumentElement();
var originView = "0 0 600 500";
eSVG.setAttribute("viewBox"，originView);