svg移动的地球代码（svg平移）

今天给各位分享svg移动的地球代码的知识，其中也会对svg平移进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、简单实现svg的拖拽和缩放
• 2、如何使用 SVG 进行缩放和平移
• 3、android怎么使用svg代码
• 4、svg文件是什么/怎么打开
• 5、svg的作用及工作原理

简单实现svg的拖拽和缩放

此方法限制太多，可能

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 ，汗呐！！！

把svg放大三倍，这里缩放就要计算中心位置偏移量了，然后使用transform的translate进行平移，避免重绘。

如何使用 SVG 进行缩放和平移

!-- Define an SVG graphic which will be reduced in size and reused multiple times. --

g id="parentGraphic" style="stroke: blue; fill: blue;"

rect x="5%" y="5%" width="90%" height="90%" rx="10" ry="10"

style="fill: none; stroke-width: 2px;"/

text x="50%" y="97.2%" style="text-anchor: middle;"

This text is going to get extremely small.

/text

text x="95.4%" y="50%" style="writing-mode: tb; text-anchor: middle;"

The tspan style="stroke: red;"red/tspan center dot is to the left.

/text

text x="3.3%" y="50%" style="writing-mode: tb; text-anchor: middle;"

The tspan style="stroke: red; fill: red;"red/tspan center dot is to the right.

/text

/g

在 HTML5 内联 SVG 测试图形示例中，这个组合的 SVG 图形 (g id="parentGraphic" ...) 减小了尺寸并且多次重复使用以通过多次调用use 元素创建之前显示的测试图形。例如：

use href="#parentGraphic" … /

use 元素创建了引用元素的副本（以及该元素中包含的所有子元素）。

另请注意，SVG text-anchor: middle 样式可轻松将文本居中显示，而 writing-mode: tb 可按垂直方式显示文本。

与最新的 CSS 转换一样，SVG 始终支持相同的概念，包括转换、缩放和旋转。要围绕某个中心点按给定因子缩放图形，可以使用以下伪代码：

transform="translate( -centerX*(factor-1), -centerY*(factor-1) ) scale(factor)"

在此伪代码中，(centerX, centerY) 表示中心点的 (x, y) 坐标，而 factor 是所需的比例因子。

在此示例中，SVG 视区为 800 x 600 像素，视区的中心位于 (400, 300)。要将 parentGraphic 缩小 10%（即比例因子为 0.9），可以使用（在伪代码中）：

transform="translate( -400*(0.9-1), -300*(0.9-1) ) scale(0.9)"

这将简化为下面的非伪代码：

transform="translate(40, 30) scale(0.9)"

然后，可将其直接应用于 use 元素来获得所需效果：

use href="#parentGraphic" transform="translate(40, 30) scale(0.9)"/

此技术用于减少和集中其余 10 个版本的 parentGraphic。

现在，我们将使用这个测试图形来演示如何采用两种方法在 SVG 中进行缩放和平移：基于浏览器和基于脚本。

基于浏览器的 SVG 缩放和平移

对 SVG 图进行缩放和平移的最简单方法是使用浏览器自带的缩放和滚动功能。在 Internet Explorer 9 中，下表描述了与缩放相关的鼠标和键盘快捷方式。

用户操作

键盘快捷键

鼠标快捷键

放大

Ctrl + 加号

Ctrl + 向前滚动滚轮

缩小

Ctrl + 减号

Ctrl + 向后滚动滚轮

返回默认缩放级别

Ctrl + 0

不适用

使用浏览器的滚动条可在缩放图中轻松进行平移。

基于 JavaScript 的 SVG 缩放和平移

由于针对缩放和/或平移的用户界面可能随浏览器的不同而不同（或出于其他原因），因此实现你自己的基于 JavaScript 的缩放和平移功能很有用。下面提供了针对这两种情况的示例。

JavaScript 缩放

该示例使用两个按钮和鼠标滚轮啦放大和缩小测试图像：当前比例 SVG 缩放。

尽管通过注释很好地记录了此示例，但仍需注意以下几点：

用于调整测试图大小（或缩放级别）的技术是 svg 元素的 currentScale 特性。

mousewheel 事件已与 window 元素挂接（与 svg 或 body 元素相对），这样一来，无论缩放级别如何，鼠标滚轮在整个网页上都是活动的。

需要 svg 元素的 viewBox 属性以避免与缩放有关的呈现问题（在没有 viewBox 属性的情况下进行尝试即可观察该问题）。

JavaScript 平移

在放大某个特定 SVG 图后，能够移动（平移）图形以查看各种放大功能会很有用。以下示例使用箭头键来平移一个简单的 SVG 图像（蓝色圆圈）：SVG 平移。

在此示例中，平移（和下一个示例中的缩放）是通过操作 svg 元素的 viewBox 特性的值来实现的。viewBox 属性的值（一个包含四个数字的字符串）在用户空间中指定了一个矩形，该矩形将映射到视区边界（由svg 元素建立）。通过使用有助于教学的非标准词汇，可按如下方式描述

viewBox 语法：

viewBox="ULCx ULCy UUwidth UUheight"

注意 ULCx 和 ULCy 分别表示“左上角 x”和“左上角 y”。UUwidth 和UUheight 分别表示“用户单位宽度”和“用户单位高度”。

通常，会相对于此用户空间/在此用户空间（即用户坐标系统）内绘制 SVG 图形对象。对于利用相对静态图形进行缩放和平移，SVG

图形对象通常决不会在其用户坐标系统内移动；相反，将在 SVG 视区内/相对于 SVG

视区移动用户坐标系统（及其所有“已附带”图形）。因此，从视区的角度来看，已移动图形对象。换言之，通常你可以移动或转换“已附带”图形对象的用户坐标系统，而非图形对象本身。

牢记上述内容，可按如下方式解释 4 个数字（ULCx、ULCy、UUwidth 和 UUheight）：

ULCx 和 ULCy - 移动用户坐标系统（在其中绘制图形对象的区域）的原点，这样点 (ULCx,

ULCy) 将出现在定义的 SVG 视区的左上角。也就是说，在视区内以可视方式移动用户坐标系统，这样用户坐标点 (ULCx,

ULCy) 将出现在 SVG 视区的左上角。这将停止移动（相对于视区而言）用户坐标系统的原点及其所有“已附带”图形对象。

在下面的示例中，用户坐标系统等效于隐式视区坐标系统。

android怎么使用svg代码

编写 vector drawable 资源文件

?xml version="1.0" encoding="utf-8"?

vector xmlns:android=""

android:width="600dp"

android:height="600dp"

android:viewportHeight="512"

android:viewportWidth="512"

path android:fillColor="#410a0a0a"

android:pathData="@string/pretty_girl"/

/vector12345678910111234567891011

这里解释一下这几个属性；

android:width=”600dp” 实际显示的宽度为600dp

android:height=”600dp” 实际显示的高度为600dp

android:viewportHeight=”512” 矢量限定的宽度为512，这没有单位；

android:viewportWidth=”512” 矢量限定的高度为512

其实以上两个属性，就是我们 svg 图片的宽高

运用，与其他 drawable 资源文件一样，直接设置 View 的背景或者 ImageView 的 src 资源

RelativeLayout xmlns:android=""

android:layout_width="match_parent"

android:layout_height="match_parent"

ImageView

android:id="@+id/id_img"

android:layout_centerInParent="true"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/pretty_girl"/

/RelativeLayout

svg文件是什么/怎么打开

svg文件是绘图文件，打开方法为：

1、打开Inkscape矢量绘图软件，

2、接下来需要选择文件，选择打开，如下图所示。

3、接下来需要选择要打开的SVG文件，点击打开，如下图所示。

4、最后就可以打开成功。可以编辑或修改了，如下图所示。

svg的作用及工作原理

可以随意放大图形显示，但绝不能以牺牲画质为代价；可以在SVG图像中保持可编辑和可搜索状态；一般来说，SVG文件比JPEG和PNG格式的文件小得多，所以可以快速下载。相信SVG的发展将为Web提供一种新的图像标准。1.SVG可以被许多工具读取和修改(比如记事本)。2.与JPEG和GIF图像相比，SVG的尺寸更小，可压缩性更强。3.SVG是可伸缩的。4.SVG图像可以以任何分辨率高质量打印。5.SVG可以在不降低图像质量的情况下放大。6.SVG图像中的文本是可选的，同时也是可搜索的(非常适合制作地图)7.SVG可以用JavaScript技术运行。8.SVG是一个开放的标准9.SVG文件是纯XML操作原理它基于XML(可扩展标记语言)，由万维网联盟(W3C)开发。严格来说，它应该是一种开放的标准矢量图形语言，可以让你设计出令人兴奋的、高分辨率的Web图形页面。用户可以直接用代码绘制图像，用任何文字处理工具打开SVG图像，修改一些代码使图像具有交互功能，随时插入HTML中通过浏览器查看。SVG图像及其行为是在XML文本文件中定义的。这意味着它可以被搜索、索引、编写脚本和压缩。作为XML文件，您可以使用任何文本编辑器和绘图软件来创建和编辑SVG图像。阿拉伯Unicode程序员和书法家ThomasMiloWikipedia认为采用SVG是小型图像技术流行的原因。对象类型SVG允许3种图形对象类型:矢量图形、光栅图像和文本。图形对象，包括诸如PNG和JPEG的光栅图像，可以被分组、设计、转换和集成到先前的渲染对象中。文本可以位于任何适合应用程序的XML名称空间中，从而提高SVG图形的搜索能力和可访问性。SVG提供的特性集涵盖了嵌套变换、裁剪路径、Alpha通道、滤镜效果、模板对象和扩展性。SVG严格遵守XML语法，使用文本格式的描述性语言来描述图像内容，因此是一种独立于图像分辨率的矢量图形格式。

关于svg移动的地球代码和svg平移的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。