svg放大缩小-怎么在网页中通过JAVAscript控制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 视区的左上角。这将停止移动(相对于视区而言)用户坐标系统的原点及其所有“已附带”图形对象。

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

SVG也可以设置id和class,所以可以操作SVG元素的style来调整图像尺寸

你的文字提到了两个问题:

1.图片文件的大小

2.svg文件的大小

首先,对于图片文件的大小问题。

影响图片的大小主要有四个方面:一、图片的尺寸;二、图片复杂程度;三、图片的分辨率;四、图片保存的格式。

如果是图标你可以将尺寸设置成 35x35像素,分辨率72,保存成jpg(压缩等级设置8或9)都可以,这种设置对图片细节影响很少,文件也缩小了很多。这个设置的图标就像我们电脑桌面上的图标大小差不多,放到手机上应该能满足要求了。

这种设置的图片文件大小应该是2~4kb,即使你将尺寸放大10倍也才20~40kb。

第二个,svg文件大小的问题

svg文件大小完全受你内容复杂程度而定,你想让文件变小。有以下方法:

1.在Illustrator中将那些不会影响内容的路径节点尽量减少;

2.如果涉及到文字,请不要将文字转成曲线;

3.不要对文字设置字体,默认就是宋体。

4.将文件保存成.svgz svgz是压缩格式,如果手机支持svg的话一般也支持svgz的。

基本解决办法就是上面的了。

另外这篇文章或许对你有帮助:

怎样对Illustrator制作的SVG进行优化