如何从javascript中的绝对路径点找到svg viewbox？

编程问答 2022-04-22

问题描述

我有这个绝对 svg 路径（通过 snap.svg 生成）：

[
    ["M",228.87,219],["L",42.129999999999995,218.39],["C",42.19,218.39,42.24999999999999,218.26999999999998,42.309999999999995,218.05999999999997],45.69604818268118,215.87679077211533,49.409674477925975,214.24954725001717,53.309999999999995,213.23999999999998],59.925962526359555,211.59043216949715,66.69590590541075,210.63526689076963,73.50999999999999,210.39],111.32,208.26999999999998,149.60999999999999,215.57,187.13,212],194.23,211.32,201.26999999999998,210.25,208.45,210.05],215.07694185616865,209.86704384410132,221.70312226030103,210.44075364111734,228.20000000000002,211.76000000000002],228.35,216.28,228.56,219,["Z"]
]

我需要在 HTML 页面上显示此路径。我编写了以下逻辑来根据这些值生成视图框：39.129999999999995 208.39 228 42.

问题似乎出在宽度和高度上：228 42

var left = [];
        var top = [];
        absValue.filter(path => path[0] === 'L').forEach((r,index) => {
            left = left.concat(r[1]);
            top = top.concat(r[r.length-1]);
        })
        let topPosition = Math.min.apply(Math,top);
        let leftPosition = Math.min.apply(Math,left);
        console.log(isFinite(leftPosition))
        if(!isFinite(leftPosition)) {
            left = [];
            top = [];
            absValue.filter(path => path[0] === 'C').forEach((r,index) => {
                left = left.concat(r[1]);
                top = top.concat(r[r.length-1]);
            })

            console.log(absValue)
            topPosition = Math.min.apply(Math,top);
            leftPosition = Math.min.apply(Math,left);


        }

        const values = absValue.join().match(/(\-?\d+(\.\d+)?)/gi).map(value => parseInt(value).toFixed(2));
        const max = Math.max.apply( Math,values );
        const min = Math.min.apply( Math,values );
console.log(`${leftPosition} ${topPosition} ${max} ${min}`)


      /// THE PROBLEM SEEMS TO BE  ${max} ${min}
        return `${leftPosition - 3} ${topPosition - 10} ${max} ${min}`;

我的项目

  <svg class="svg_vector" xmlns="http://www.w3.org/2000/svg"
                              attr.viewBox="{{object.path | getSvgD | svgViewBox }}"
                              preserveAspectRatio="xMidYMid meet"
                                 xmlns:xlink="http://www.w3.org/1999/xlink"
                                 preserveAspectRatio="none">
                                    <path attr.d="{{object.path | getSvgD}}"
                                    ></path>
                              </svg>

问题是viewBox，坐标不正确，我希望路径完全适合外部svg标签。我看到宽度和高度的问题。有人能帮我从 svg 的路径值中找到正确的宽度/高度吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptsvgviewbox