This content originally appeared on DEV Community and was authored by NikiMunger
createElementNS
document.createElementNS(namespaceURL, tagName)
-
namespaceURL（命名空间 URL）
这是一个固定的字符串，用来告诉浏览器这个标签属于哪个规范。
SVG 固定用：
'http://www.w3.org/2000/svg'MathML 用：
'http://www.w3.org/1998/Math/MathML' -
tagName（元素名称）
也就是你要创建的标签名称，例如：- 'svg'
- 'circle'
- 'rect'
- 'path'
示例：在 SVG 命名空间里创建一个 <svg> 标签
document.createElementNS('http://www.w3.org/2000/svg', 'svg');
setAttribute()
setAttribute(name, value) 是 DOM API，用于：
给元素添加 / 修改 HTML 或 SVG 的属性（attribute）
它可以操作任何标签上的属性，包括：
- HTML 属性
- SVG 属性
- 自定义属性（data-*）
- 布尔属性（disabled）
- 非标准属性（自定义扩展）
最常用形式
element.setAttribute('属性名', '属性值');
为什么要用 setAttribute？
因为 某些属性不能直接用点语法赋值，尤其是：
- SVG 属性
- 带中划线的属性（如 stroke-width、data-id）
- 不存在于 DOM property 的 HTML 属性
例如：
circle.stroke-width = 4;
不会生效
circle.setAttribute('stroke-width', 4);
才能生效
SVG 的 viewBox 属性
viewBox 决定了：
SVG 内部的“坐标系统范围”是什么，以及如何映射到屏幕上的显示区域。
它定义了 你在 SVG 画布里“看到的那一块区域”。
viewBox 的语法
viewBox="minX minY width height"
- minX：视图窗口的左上角 X 坐标
- minY：视图窗口的左上角 Y 坐标
- width：视图窗口的宽度
- height：视图窗口的高度
SVG 的两个坐标系统
- SVG 有两个坐标系统： 外部尺寸（实际显示大小） 由 width / height 或 CSS 控制
- 内部坐标系（viewBox 决定）
例子：
<svg width="200" height="200" viewBox="0 0 100 100">
含义：
- 外部尺寸 = 200x200 像素
- 内部绘图坐标 = 100x100 单位
- 相当于你把 100x100 的世界压缩放大到 200x200 来显示
结果：
- 在 SVG 里 (0,0) 是左上角
- (100,100) 是右下角
- 一个单位 = 2 像素（因为 200/100 = 2）
<svg>
所有 SVG 图形（rect, circle, path）,都必须放在 <svg> 内才能渲染。
| 元素 | 作用 | 与对方关系 |
|---|---|---|
<svg> |
整个进度条的画布 | 父节点 |
<rect> |
画出来的边框 | 子节点 |
This content originally appeared on DEV Community and was authored by NikiMunger
NikiMunger | Sciencx (2025-11-26T01:25:23+00:00) createElementNS、setAttribute()、SVG 的 viewBox 属性、`<svg>`. Retrieved from https://www.scien.cx/2025/11/26/createelementns%e3%80%81setattribute%e3%80%81svg-%e7%9a%84-viewbox-%e5%b1%9e%e6%80%a7%e3%80%81svg/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.