svg平移、放大、缩小及js操作svg

最新推荐文章于 2025-05-17 09:21:20 发布

原创最新推荐文章于 2025-05-17 09:21:20 发布 · 7.6k 阅读

5 ·

CC 4.0 BY-SA版权

svg 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了SVG图形中的width、height和viewBox属性，并详细解析了它们的作用。通过示例展示了如何利用JavaScript进行SVG元素的创建、属性设置，包括创建circle、text和line元素。同时阐述了viewBox如何影响SVG图形的缩放和平移。

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

在svg图形中，很重要的概念就是坐标系。首先分析一下width、height、viewBox这三个属性。

width:宽度，这个宽度是指在页面中实际使用的大小，跟div中定义width是同样的含义。

height：高度，含义同上。

viewBox:视图框，是一个由字符串表示的，格式："0 0 2050 1000",--->(ULCx ULCy UUwidth UUheight)

ULCx 与 ULCy 分別代表「左上角 x」与「左上角 y」。UUwidth 与UUheight 分別代表「使用者单位宽度」与「使用者单位高度」

一般而言，会在使用者空间内，将 SVG 图形物件绘製到相对於使用者空间 (也就是使用者座标系统) 的位置。以相对静态的图形来缩放和移动瀏览时，SVG 图形物件通常绝不会在使用者座标系统中移动；而是使用者座标系统本身会在 (相对於) SVG 检视区中移动 (延著所有其附加的图形)。因此从检视区的观点来看，图形物件已经移动。也就是说，您通常是移动或转换附加图形物件的使用者座标系统，而非图形物件本身。

基於上述说明，ULCx、ULCy、UUwidth 与 UUheight 这四个数字的解释如下：
ULCx 与 ULCy - 会移动使用者座标系统 (会在裡面绘製图形物件) 的原点，这样该点 (ULCx, ULCy) 就会出现在定义的 SVG 检视区的左上角。也就是，将在检视区中移动使用者座标系统视觉化，这样使用者座标点 (ULCx、 ULCy) 就会发生在 SVG 检视区的左上角。这最后将会变成沿著所有「附加」的图形物件移动与检视区相对的使用者座标系统原点。
例如：

然而，在下列范例中，水平方向每 600 个使用者单位会有 300 像素 (或是每个使用者单位 0.5 像素)，而垂直方向每 400 个使用者单位就会有 200 像素 (或是每个使用者单位 0.5 像素)。请注意，这项变更会造成所有的图形物件大小减半。

JS操作svg:

1、获取子元素：firstChild, firstElementChild,这是由于svg文件中可能会引入<?xml version="1.0" encoding="utf-8"?>这样的内容，这时firstChild就会表示这些非HTMLElement元素，包括空格、回车。

2、设置属性：setAttribute('name','value');

3、设置text标签的值：textSvg.firstChild.data ='40',或者使用textContent,其中有一个属性wholeText,但不可用,或者直接textSvg.textContent = '40';

例子一：创建一个circle

gearCircleElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
gearCircleElement.id = ‘circle’;
gearCircleElement.cx.baseVal.value = 34;
gearCircleElement.cy.baseVal.value = 43;
gearCircleElement.r.baseVal.value = 12;
gearCircleElement.style.fill = '#f00';

例子二：创建文本

gearTextElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
gearTextElement.id = ‘text’;
gearTextElement.setAttribute("x", 67);
gearTextElement.setAttribute("y", 34);
gearTextElement.setAttribute("transform", "translate(3, -3)"); // Offset the text from the center of the circle.
gearTextElement.textContent = "##" ;
gearTextElement.setAttribute("font-size", 10);

例子三：创建直线

gearLineElement = document.createElementNS("http://www.w3.org/2000/svg", "line");
gearLineElement.id = "line";
gearLineElement.x1.baseVal.value = 3;
gearLineElement.y1.baseVal.value = 56;
gearLineElement.x2.baseVal.value = 12;
gearLineElement.y2.baseVal.value = 43;
gearLineElement.style.stroke = "white";

lie

jsc