html中怎么获得svg的对象

1、背景

SVG是Scalable Vector Graphics的缩写，意为可缩放矢量图形。1998年，万维网联盟成立了一个工作组，研发一种通过XML来表现矢量图形的技术——SVG！由于SVG也是一种XML文件，所以SVG也继承了XML的开放性、可移植性和交互性的优点。如今几乎所有主流的浏览器都支持SVG，大家可以从 这里 得到更多的兼容信息，其中包括：

使用<embed>或者<object>元素来显示基本的SVG图形；

使用<img>来显示SVG图形；

将SVG图形应用为CSS背景图；

直接在HTML文档中使用<svg>标签（需要HTML5支持）；

对使用CSS或者外部对象元素的HTML元素使用SVG变换、滤镜等特效；

对SVG对象使用类似photoshop的效果，包括模糊和色彩处理；

对SVG图像使用动画；

使用SVG格式的字体；

2、图形系统

目前在计算机上主要有两种形式来表现图形，一种是栅格图形，另一种是矢量图形。

21 栅格图形

在栅格图形中，图像用像元或者像素的矩形阵列来表示，每个像素代表一个RGB颜色值或者是一个指向颜色列表的索引。通常以一种压缩格式来存储（如JPEG, GIF, PNG等），由于现在大部分的显示设备都是栅格设备，所以显示这些图形只需要做解压处理就可以了。

22 矢量图形

在矢量图形系统中，图形被描述为一些列的形状，它是特定坐标的集合。显示矢量图形需要按照特定的命令来绘制这些坐标，然后显示在屏幕上。矢量图形是对象，而不是一系列的像素。它们可以改变颜色、形状还有大小，图形中的文字都是可以被检索的，这些与栅格图形都有很大的不同。

23 为什么要使用矢量图形

绝大部分情况下，我们都在使用栅格图形，而且创建栅格图形的工具更容易获得和使用。但是矢量图形有一个栅格图形无法替代的优势：无论如何的缩放，矢量图形都不会失真。这使得当我们需要具有精确测量以及看清图形细节的放大能力时，矢量图形显得尤其重要。

3、创建一个SVG图形

下面首先创建一个SVG图形，这里我并不会详细的讲解各个标签，只是先给一个感性的认识，随后的章节会对SVG的语法做详细的介绍。看代码：

1 <xml version="10">

2 <!DOCTYPE svg PUBLIC "//W3C//DTD SVG 10//EN" ">

此方法限制太多，可能

svg使用d3绘制，并且抽象出svg中所有元素的一个参照点和缩放比例

svg元素不会太多，否则会造成卡顿。

最近有个项目需要我帮一下前端，主要是使用d3绘制svg放在页面，其中有一个功能就是对绘制的svg进行拖动和缩放，有点像地图。

这里我已经写好了一个方法来绘制svg

其中svg是要绘制的元素，data是要绘制的数据，x，y是svg的中心坐标，svgA是父元素的边长，来控制svg（正方形）刚好在父元素内，radio是缩放比例

实现方式是<font color='red'>重绘</font>，所以元素太多会造成卡顿。

一、拖拽

我们来分析拖拽的过程，鼠标按下---->鼠标移动------>松开鼠标。对应的事件分别是mousedown、mousemove、mouseup，先定义两个全局变量

鼠标按下事件

鼠标移动事件

最后放开鼠标

一个问题，毋庸置疑这三个事件都注册在svg元素（或者与svg等大的父元素）上，但是当鼠标拖到svg外面时，在svg外面放开了鼠标，鼠标回到svg中，图形会随着鼠标移动，这样是不应该的，所以应该把最后一个事件mouseup注册到最外面的元素上，那么鼠标在svg外放开也可以触发。

二、缩放

缩放的实现和拖拽类似，相同的就不赘述了。

缩放是根据鼠标滚轮的事件触发，但是鼠标滚轮有他的默认事件，那就是页面滚动，这里要阻止它。

对于缩放，我是想做对于鼠标位置放大和缩小，这里要获取到鼠标相对于父元素的坐标（具体做法可以参考上篇文章），保证鼠标放在的那一点相对于父元素的坐标（后都称绝对坐标）不变，再计算中心坐标的偏移量，一开始我是使用矩阵的坐标变换做的，计算量很大，结果显示并不如预期，并且当时矩阵坐标变换也学的不好，我怀疑是算错了，然后突然想到向量，发现用向量的话计算量大大降低，结果显示还是一样。最后还是做的关于中心坐标（包括拖拽后的）的缩放。

对于没能将图形在鼠标位置放大缩小的原因，我认为是做法有问题，项目中的svg图形是以中心点开始向外发散绘制的，所以不应该是鼠标那一点绝对坐标不变，而应该是鼠标所在的元素组的参考点绝对坐标不变。但是实现起来太麻烦，另外如果鼠标没有在任何一个元素组也不好处理，所以干脆以中心坐标不变吧。

另外，此方法简单粗暴，但用处并不太大，只做对拖拽和缩放的理解使用。

最尴尬的是在写这篇博客的时候我看到了一篇文章，让我知道了有 transform ，汗呐！！！

>

1是可伸缩矢量图形（可缩放矢量图形）

2用来定义用于网络的基于矢量的图形

3使用XML格式定义图形

4图像在放大或改变尺寸的情况下其图形质量不会有损失

5是标准

如何在页面中调用百度地图，直接在你想要插入的页面上调用百度地图代码即可

百度地图调用API地址：>

qtsvg旋转坐标变换公式为，旋转变换（rotate）transform="rotate(angle cx,cy)"。angle代表旋转角度，缺省单位是“度”，瞬时针为正，逆时针为负。（cx,cy）是旋转中心所在的坐标。

以上就是关于html中怎么获得svg的对象全部的内容，包括:html中怎么获得svg的对象、SVG在iOS中使用总结、简单实现svg的拖拽和缩放等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！