单击这里以便观看效果。将鼠标移动到矩形上面时，会显示鼠标的 X 和 Y 位置，并且这两个显示的值会随着鼠标的移动而改变，在矩形上单击鼠标会记录下单击的位置。分析函数 changeText(evt) 可揭示创建交互文本的步骤：1 为所使用的每一个文本元素指定 id ，这样脚本就可以提取它们。2 第一次调用 svgdocumentgetElementByIdx_x_x_x() ，其中传递的参数是要改变的文本元素的 ID。它被存储在一个变量中以供以后使用。3 调用evt 方法 getClientX() 和 getClientY() 以得到指针的 X 和 Y 坐标，并将它们存储在变量 XPos 和 YPos 中。4 调用 svgdocumentcreate_r_rTextNode() 创建一个新文本节点。将更新过的文本字符串传递给这个函数。5 最后，对这个文字元素调用 replaceChild 方法。它带两个参数 -- 替换文本节点和被替换的子元素。对 getFirstChild() 的调用保证更新的文本放置正确。
在之前的项目中需要用到D3来绘制可视分析视图，参考了一些例子之后，能够依葫芦画瓢。但是想要自己创作的时候却感受到了技术上的瓶颈。以我对D3粗浅的理解，认为其是基于SVG的lib，即D3中图像的绘制的基础就是SVG，工欲用D3，必先理解SVG。遂决定先补一补SVG的知识。讲的不会很具体，主要是概念上的东西。
接下来主要涉及到的有：
栅格化的图像则是把原来一个像素点放大，这样会导致放大之后的糊啦。而svg是矢量图，矢量图就是不论放大多少倍，他都不会变形变模糊。这是怎么做到的呢？来自于矢量图的放大就是把形状坐标的值按倍数变大，重新绘制就完事了。所以说，svg绘制的关键就在于坐标点的确定。当我在画一个svg的时候，我其实要找的就是能够确定这个svg图像的坐标点。
画画要纸，画SVG则要画布。画布就是这个SVG元素。 width 和 height 的指定单位可以是 px em 百分比 。
画布有一个默认的坐标系。
绘制的时候，如果遇到了需要旋转、缩放、移动的情况。其实并不是对元素本身的坐标进行计算然后改变，而是将元素的坐标系进行变换，变换完毕之后，在新的坐标系去绘制图像。这样做的好处是让数学计算变得更加简单。毕竟坐标系可以近似看作一个长方形，变换起来计算量并不会太大，相反，如果是对图形变换，绘制一个奇形怪状的东西，则对每一个坐标进行变换计算，就非常可怕了（类似一个复合函数的计算，为了简化先算外层再算内层一般）。
path 就相当于你画的每一笔。绘制的过程就是行笔的过程。笔的连线由坐标点去控制。
一些常用的图形如 circle rect line 等，是可以直接使用的，只要给它设置了它接受的参数。
贝塞尔曲线对于熟悉Illustrator的人来说并不会陌生。svg是支持画两次贝塞尔曲线（一个控制点）与三次贝塞尔曲线（两个控制点）的。这就给画出“优雅”的图形成为可能。
最后放一篇今天读到的很好的文章： How do you learn d3 这篇文章总结了几位擅长数据可视化的学习经验：学习d3应该是目标导向的，先知道自己要画的是什么，然后再去学习怎么画。这也给我的学习可视化的方法上提供了思路：不必追求把D3的api看的滚瓜烂熟，D3不过是一个用于实现的设计的工具。
最近因为工作需要做了点HTML5可视化研究如下
为什么没有字体颜色作为一个设计师很不爽
第一次发文有写错的地方还请诸位高手多多包涵
设想，要在页面中生成大量的简单图形，比如10万个方块，并对它们进行拖拽 *** 作。
基本思路有三种方式，传统Div，Svg，与Canvas。
为了加拖拽，暂时没有用canvas。
因为canvas无法生成dom节点，不存在id这种属性，需要通过判断鼠标位置来获取元素再进行 *** 作。虽然写个isMouseinObj()的function也不是不行，但总觉得以后针对某对象单独处理会夜长梦多（主要还是懒）。。。不过从生成图形角度讲，canvas理论上是最快的。
因为贪生怕死担心Dom过多死机，准备先分区生成方块，于是：
一个简图，整体划分如下，设两个input框的值分别为m, n，每个蓝块包括n个绿块。点击每个蓝块可在下方生成n个绿块。
点击GenAll可一次性生成mn个绿块。点击Drag可对绿块进行拖拽。
模拟开始。
首先是用div模拟方块。因为比较熟悉写起来也简单。
Div的拖拽方式可以分成两种。
Jquery-ui的draggble还有很多其他参数，请参考api文档。
现在假定一种新情形：绿色方块只能拖拽到虚线框之内。
默认情况下，Html元素均不可拖拽，所以需要设置拖拽元素的draggable属性为true。同时，默认无法将元素放置到其他元素中，所以需要eventpreventDefault()设置允许放置。
本例中，为class为abox的绿方块添加draggable。
为class为wrap的虚线框添加preventDefault。
之后通过dataTransfer传输数据，实现box的移动。
由于Svg也是直接在Html中生成Dom节点，理论上Div所能实现的功能它都可以实现，并且绘图效果更佳。
然后生成Svg元素，并设置其属性。
循环生成Svg方块并添加拖拽属性。
但这种方式有个问题，就是——慢。当生成仅10000个方块时，效率便低的不可估量。
然而Svg无法应用Html5原生的Drag and Drop事件。
相比于引用插件，这样的效率提高了不少。
从结果上看，在数量少时，针对方块这种简单图形的简单 *** 作Div和Svg均可胜任。然而设置了总共生成100000个方块，发现单从生成的角度，Svg的渲染用时大约是Div的1/2（这里指Dom中直接绘制Svg而非通过js插件绘制Svg）。
加上拖拽功能后，用Html5原生拖放事件的Div，及用鼠标事件的Svg，明显快快快快于应用js插件拖放的效率。于是乎插件虽然强大但对于大量节点的处理实在过于缓慢。
于是在图形化上还是应用Svg更舒畅一些。
但有一个尚未解决的问题。
应用鼠标事件拖动Svg，当鼠标移动过快时，mousemove事件无法触发，导致移动效果不能实现。粗略查了下似乎可以添加透明背景层接收所有触发事件，不过还没有深入研究。
这篇就到此吧。等解决了mousemove的bug再更新后续。
(´・ω・`)
//需要获取当前SVG图像的DOM
var svgDoc=null;
function initHtml(){
var svgEle = documentgetElementById("testSVG");
svgDoc = svgElegetSVGDocument();//获得svg的document对象
alert(svgDoc);
var rect = svgDocgetElementById("rect");//这个是svg文档中的一个元素的id,了解svg会懂的，就是这句报错
}
<body onload="initHtml()">
<div style="position:static;text-align:center;z-index:100">
<embed id="testSVG" name="testSVG" src="testsvg" width="1024" height="768" type="image/svg+xml" pluginspage=">
svg
即
scalable
vector
graphics，是一种用来绘制矢量图的
html5
标签。你只需定义好xml属性，就能获得一致的图像元素。
使用svg之前先将标签加入到html
body中。就像其他的html标签一样，你可以为svg标签为之添加id属性。也可以为之添加css样式，例如“border-style:solid;border-width:2px;”。svg标签跟其它的html标签有通用的属性。你可以用height="100px"
width="200px"
为其添加高度和宽度。
现在就将svg元素加入到我们html代码中，svg提供很多绘图形状，例如线条、圆、多边形等。
svg线条：
svg线条用标签定义，在此标签内你还可以定义其他的属性。
该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:green;”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。
svg画圆：
svg提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为mycircle。为了定义圆的中心以及半径，使用cx="55"
cy="55"以及r="50"属性分别定义。使用fill="#219e3e"为圆填充颜色。同样你可以用stroke="#17301d"
stroke-width="2"定义圆周线条颜色和宽度。
svg矩形:
同样的使用标签来画矩形，我们同样设置了
id
属性
“myrectangle”
,用
width="300"
height="100"
定义高宽，使用
fills
属性定义填充颜色。用
strock
定义边框。还有一点需要注意，我用
fill-opacity="05"
stroke-opacity="05"
为
stroke
和
filling
都添加了透明度。
svg椭圆：
我们同样是用标签来绘制椭圆。设置其
id="myellipse"
，给定起中心坐标
cx="120"cy="60"，长轴短轴半径
rx="100"
ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3f5208;stroke:black;stroke-width:3"。
svg多边形：
我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如
points="10,10
75,150
150,60"
，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用
style="fill:#63bcf7;stroke:black;stroke-width:3"
定义多边形填充颜色、边框以及边框宽度。
什么是SVG格式？
简单地说,SVG格式是一种可缩放矢量图形。
在计算机中存储时,这种格式的文件不占用磁盘空间。用鼠标直接拖拽就可以改变其外观,或者通过简单的修改使其适合特定场合使用。 典型的svg文件由一系列透明的png位图组成(一个或多个png图层),这些的像素值为0或1,并且每个图层都拥有各自的属性信息、透明度、背景色等等。 svg文件的本质是一个位图图像序列,而该图像序列可以包含文本内容或其他类型的对象数据(例如颜色和形状)。
SVG格式优势1、色彩丰富，可编辑性强。
2、文件小而轻，并且图像质量好。
4、易于传输和共享。
8、能够提供多种显示模式，有广泛的应用领域。
SVG在线转换svg格式是一种图形文件,需要借助一些软件才能将svg转换成其他格式，阿强在这里推荐一款转换功能强大并且免费的在线转换器——AI改图神器的在线SVG格式转换器。
*** 作步骤也非常简单，只需要上传SVG格式的到在线SVG转换器中，选择你想要转换的格式，比如jpg、png等，最后点击开始转换就完成了，关键还是免费的！
以上就是关于SVG中如何获得鼠标坐标并显示（转载)全部的内容，包括:SVG中如何获得鼠标坐标并显示（转载)、帮助理解D3的SVG基础知识、Div & Svg可视化探索笔记等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）