获取SVG viewBox属性内部数据

马黑黑 · 发表于 2025-9-26 18:24

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

SVG 的 viewBox 属性用于定义 SVG 视口在用户空间中的位置和尺寸。其语法结构为：

viewBox="0 0 1024 768" viewBox="0,0,1024,768"

可以看到，viewBox 共有四个属性值，第一、二个是 x、y，规定视口起点坐标，第三、四个是 width、height，设定视口宽、高。各值放在小角引号内，彼此间用小角空格或小角逗号隔开。

获取 viewBox 值可以通过 element.getAttribute('viewBox') 实现。getAttribute 方法拿到的将是 ① 一个字符串（如果设置了 viewBox 属性），② 或一个无效字符串（如果设置 viewBox 出现错误），③ 或一个空值（如果未设置 viewBox）。要获得可用于后续计算需要的数值，需要做相应处理，例如下面的例子——

/***

getViewBoxValue 函数

@param svg : svg元素

@param pointNum : 顶点数量

@param radius : 顶点所在外切圆半径

@returns {Array} 顶点坐标数组 [[x1,y1], [x2,y2], ...]

**/ function getViewBoxValue(svg, pointNum, radius) { // 获取 viewBox 属性值 let viewbox = svg.getAttribute('viewBox'); // 初始化变量 : 取 SVG 缺省设置值 let x = 0, y = 0, width = 300, height = 150; // 如果拿到 viewBox 属性值 if (viewbox) { // 拆分属性值并将各值强制为浮点数 const ar = viewbox.split(/[\s,]+/).map(parseFloat); // 如果值合法 if (ar.length === 4) { x = ar[0]; y = ar[1]; width = ar[2]; height = ar[3]; } } else {// 如果没有拿到 viewBox 属性值 // 则取 SVG 元素的宽高作为 viewBox 的宽高（宽高缺省则取默认值） width = parseFloat(svg.getAttribute('width')) || 300; height = parseFloat(svg.getAttribute('height')) || 150; } // 以对象形式返回各值 return { x:x, y: y, width: width, height: height }; }

getViewBoxValue 函数对前述三种情形都一一做了处理，能够正常拿到 viewBox 属性各个数值。不过还有一个更为简洁的获取方法，它是直达的——

const mysvg = document.getElementById('mysvg'); const vb = mysvg.viewBox.baseVal; console.log(vb.x,vb.y,vb.width, vb.height);

svgElement.attribute.baseVal 拿到的是SVG或其子元素的基础属性值，上例的第二行代码获取到的是 id="mysvg" 的 SVG 标签的 viewBox 属性值并赋值给变量 vb，vg 是一个对象，里面的键值对有 x、y、width、height，和此前的函数返回值的设计一模一样。