SVGPath使用stroke-dasharray到SVGPath

时间:2017-11-02 08:48:35

标签: javascript svg

有没有办法使用stroke-dasharray属性将包含模式的SVGPath(例如虚线)转换为SVGPath?

<svg xmlns = 'http://www.w3.org/2000/svg' viewBox = '0, 0, 20, 20' version = '1.1'>
    <!-- What I have -->
    <path stroke = 'red' d = 'm1 1v.1m0 .05v.1m0 .05v.1m0 .05v.1m0 .05v.1'></path>

    <!-- What I want to have -->
    <path stroke = 'green' stroke-dasharray = '0.1 0.05' d = 'm5 1v.75' />
</svg>

例如那些路径: http://jsfiddle.net/Lrz8btsz/

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.6cm" height="27.9cm" viewBox="0 0 2159 2794" version="1.1">
    <g id="0" stroke-width="5" stroke="#000">
        <path data-h="200" d="M1299.63 598.81L1304.32 598.81M1317.05 598.81L1317.15 598.81M1329.72 598.81L1329.82 598.81M1342.39 598.81L1342.49 598.81M1355.07 598.81L1355.17 598.81M1367.74 598.81L1367.84 598.81M1380.42 598.81L1380.52 598.81M1393.09 598.81L1393.19 598.81M1405.77 598.81L1405.87 598.81M1418.44 598.81L1418.54 598.81M1431.12 598.81L1431.22 598.81M1443.79 598.81L1443.89 598.81M1456.47 598.81L1456.57 598.81M1469.14 598.81L1469.24 598.81M1481.82 598.81L1481.92 598.81M1494.49 598.81L1494.59 598.81M1507.17 598.81L1507.27 598.81M1519.84 598.81L1519.94 598.81M1532.52 598.81L1532.62 598.81M1545.19 598.81L1545.29 598.81M1557.87 598.81L1557.97 598.81M1570.54 598.81L1570.64 598.81M1583.22 598.81L1583.32 598.81M1595.89 598.81L1595.99 598.81M1608.56 598.81L1608.66 598.81M1621.24 598.81L1621.34 598.81M1633.91 598.81L1634.01 598.81M1646.59 598.81L1646.69 598.81M1659.26 598.81L1659.36 598.81M1671.94 598.81L1672.04 598.81M1684.61 598.81L1684.71 598.81M1697.29 598.81L1697.39 598.81M1698.88 587.73L1698.98 587.73M1698.88 575.06L1698.98 575.06M1698.88 562.38L1698.98 562.38M1698.88 549.71L1698.98 549.71M1698.88 537.03L1698.98 537.03M1698.88 524.36L1698.98 524.36M1698.88 511.68L1698.98 511.68M1698.88 499.01L1698.98 499.01M1698.88 486.33L1698.98 486.33M1698.88 473.66L1698.98 473.66M1698.88 460.98L1698.98 460.98M1698.88 448.31L1698.98 448.31M1698.88 435.63L1698.98 435.63M1698.88 422.96L1698.98 422.96M1698.88 410.28L1698.98 410.28M1700.48 399.21L1700.58 399.21M1713.16 399.21L1713.26 399.21M1725.83 399.21L1725.93 399.21M1738.51 399.21L1738.61 399.21M1751.18 399.21L1751.28 399.21M1763.86 399.21L1763.96 399.21M1776.53 399.21L1776.63 399.21M1789.2 399.21L1789.3 399.21M1801.88 399.21L1801.98 399.21M1814.55 399.21L1814.65 399.21M1827.23 399.21L1827.33 399.21M1839.9 399.21L1840 399.21M1852.58 399.21L1852.68 399.21M1865.25 399.21L1865.35 399.21M1877.93 399.21L1878.03 399.21M1890.6 399.21L1890.7 399.21M1903.28 399.21L1903.38 399.21M1915.95 399.21L1916.05 399.21M1928.63 399.21L1928.73 399.21M1941.3 399.21L1941.4 399.21M1953.98 399.21L1954.08 399.21M1966.65 399.21L1966.75 399.21M1979.33 399.21L1979.43 399.21M1992 399.21L1992.1 399.21M2004.68 399.21L2004.78 399.21M2017.35 399.21L2017.45 399.21M2030.03 399.21L2030.13 399.21M2042.7 399.21L2042.8 399.21M2055.38 399.21L2055.48 399.21M2068.05 399.21L2068.15 399.21M2080.72 399.21L2080.82 399.21M2093.35 399.21L2098.04 399.21" fill="none" stroke="#000000" />
        <path data-h="344F6" d="m412.49 1126.76h.06m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.1m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.1m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.1m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.1m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.1m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.1m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.09m.05 0h.09m.04 0h.07"></path>
    </g>
</svg>

我学会了如何找到路径的所有点以及它们之间的所有距离,但我不知道如何找到最长的模式。

    //REM: Simplified version of code for test purposes
    //REM: Might require a SVGPath.getPathData() polyfill (https://github.com/jarek-foksa/path-data-polyfill.js/)
    //REM: Returns a list of absolute coordinates from the path segments
    //e:=<path>
    function _toAbsoluteList(e){
        var tA = [];

        if(e && e.getPathData){
            for(var tL=e.getPathData(), i=0, j=tL.length; i<j; i++){
                var tS = tL[i];

                switch(tS.type){
                    case 'M':
                        tA.push(tS.values);
                        break
                    case 'L':
                        tA.push(tS.values);
                        break
                    case 'l': case 'm':
                        var tB = (tA[tA.length - 1] || [0, 0]);
                        tA.push([tS.values[0] + tB[0], tS.values[1] + tB[1]]);
                        break
                    case 'h':
                        var tB = (tA[tA.length - 1] || [0, 0]);
                        tA.push([tB[0] + tS.values[0], tB[1]]);
                        break
                    case 'v':
                        var tB = (tA[tA.length - 1] || [0, 0]);
                        tA.push([tB[0], tB[1] + tS.values[0]]);
                        break
                    case 'Z': case 'z':
                        tA.push(tA[0]);
                        break
                }
            }
        };

        return tA
    };

此致,Ruedi

0 个答案:

没有答案