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

获取SVG viewBox属性内部数据

<style>
        .artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
        .artBox > p { margin: 10px 0; line-height: 30px; }
        .artBox mark { padding: 4px 6px; background: lightblue; }
</style>

<div class="artBox">
        <p>SVG 的 viewBox 属性用于定义 SVG 视口在用户空间中的位置和尺寸。其语法结构为：</p>
        <div class="codebox">
viewBox="0 0 1024 768"
viewBox="0,0,1024,768"
        </div>
        <p>可以看到，viewBox 共有四个属性值，第一、二个是 x、y，规定视口起点坐标，第三、四个是 width、height，设定视口宽、高。各值放在小角引号内，彼此间用小角空格或小角逗号隔开。</p>
        <p>获取 viewBox 值可以通过 element.getAttribute('viewBox') 实现。getAttribute 方法拿到的将是 ① 一个字符串（如果设置了 viewBox 属性），② 或一个无效字符串（如果设置 viewBox 出现错误），③ 或一个空值（如果未设置 viewBox）。要获得可用于后续计算需要的数值，需要做相应处理，例如下面的例子——</p>
        <div class="codebox">
<txt-green>/***</txt-green>
<txt-green>        getViewBoxValue 函数</txt-green>
<txt-green>        @param svg : svg元素</txt-green>
<txt-green>        @param pointNum : 顶点数量</txt-green>
<txt-green>        @param radius : 顶点所在外切圆半径</txt-green>
<txt-green>        @returns {Array} 顶点坐标数组 [, , ...]</txt-green>
<txt-green>**/</txt-green>
function getViewBoxValue(svg, pointNum, radius) {
    <txt-green>// 获取 viewBox 属性值</txt-green>
    let viewbox = svg.getAttribute('viewBox');
    <txt-green>// 初始化变量 : 取 SVG 缺省设置值</txt-green>
    let x = 0, y = 0, width = 300, height = 150;
    <txt-green>// 如果拿到 viewBox 属性值</txt-green>
    if (viewbox) {
            <txt-green>// 拆分属性值并将各值强制为浮点数</txt-green>
                const ar = viewbox.split(/[\s,]+/).map(parseFloat);
                <txt-green>// 如果值合法</txt-green>
                if (ar.length === 4) {
                        x = ar;
                        y = ar;
                        width = ar;
                        height = ar;
                }
        } else {<txt-green>// 如果没有拿到 viewBox 属性值</txt-green>
                <txt-green>// 则取 SVG 元素的宽高作为 viewBox 的宽高（宽高缺省则取默认值）</txt-green>
                width = parseFloat(svg.getAttribute('width')) || 300;
                height = parseFloat(svg.getAttribute('height')) || 150;
        }
        <txt-green>// 以对象形式返回各值</txt-green>
        return { x:x, y: y, width: width, height: height };
}
        </div>
        <p>getViewBoxValue 函数对前述三种情形都一一做了处理，能够正常拿到 viewBox 属性各个数值。不过还有一个更为简洁的获取方法，它是直达的——</p>
        <div class="codebox">
const mysvg = document.getElementById('mysvg');
const vb = mysvg.viewBox.baseVal;
console.log(vb.x,vb.y,vb.width, vb.height);
        </div>
        <p>svgElement.attribute.baseVal 拿到的是SVG或其子元素的基础属性值，上例的第二行代码获取到的是 id="mysvg" 的 SVG 标签的 viewBox 属性值并赋值给变量 vb，vg 是一个对象，里面的键值对有 x、y、width、height，和此前的函数返回值的设计一模一样。</p>
</div>

<script type="module">
        import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
        linenumber();
</script>

红影 发表于 2025-9-26 20:42

这个代码的设计，是为了能够正常拿到 viewBox 属性各个数值吧。可以在拿到基础属性值后，返回各项值{:4_187:}

马黑黑 发表于 2025-9-26 21:12

红影 发表于 2025-9-26 20:42
这个代码的设计，是为了能够正常拿到 viewBox 属性各个数值吧。可以在拿到基础属性值后，返回各项值{:4_187 ...

viewBox属性在SVG中非常重要，它里面的数值对后续的计算不可或缺。很多人都会使用函数方法拿到里面的数据，极少有人会用到 basVal，除非是做游戏的可能会关注到这个方法。

红影 发表于 2025-9-26 22:05

马黑黑 发表于 2025-9-26 21:12
viewBox属性在SVG中非常重要，它里面的数值对后续的计算不可或缺。很多人都会使用函数方法拿到里面的数据 ...

这个方法还是很奇特高效的呢{:4_187:}

马黑黑 发表于 2025-9-26 22:07

红影 发表于 2025-9-26 22:05
这个方法还是很奇特高效的呢

配套svg的JS文档里都谈到，好多人都不会去细查文档

红影 发表于 2025-9-27 23:11

马黑黑 发表于 2025-9-26 22:07
配套svg的JS文档里都谈到，好多人都不会去细查文档

主要用得少，也想不起查呢。

马黑黑 发表于 2025-9-28 12:42

红影 发表于 2025-9-27 23:11
主要用得少，也想不起查呢。
做开发的不是额。只是现在做开发的也都是集团作战，通常就先去拉一个源码改改，而这些源码通常又是几年甚至十几年前人家开源的，不含有最新的标准、技术。
页: [1]
查看完整版本: 获取SVG viewBox属性内部数据