javascript - 根据整个路径轨迹的百分比在路径轨迹上移动 SVG 组

Question

我正在尝试找到一种方法，根据路径元素(id =“path”>路径)的整个轨迹的百分比，使用jQuery在SVG中移动组(id =“avatar”)，在SVG。

因此，使用“transform->translate”动态设置头像到正确的位置，例如轨迹的 20%。所以输入的是20，那么它应该设置在#path>path路径的20%上。

我找不到任何类型的函数或解析机制来实现此目标。

有什么建议吗？

SVG 在浏览器中作为整个 SVG html5 元素及其所有嵌套的 SVG 标签使用。所以不要像 img->src 那样加载。

SVG 图像:

SVG 代码:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1000 600" xml:space="preserve">
<style type="text/css">
    .st5{fill:#43A592;stroke:#8C6239;stroke-width:0.5;stroke-miterlimit:10;}
    .st6{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;}
    .st7{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;stroke-dasharray:5.0414,12.0993;}
    .st8{fill:#405813;}
    .st9{fill:#7FBFD6;}
</style>
<g id="path">
    <path class="st7" d="M253.83,291.92C438.6,278.28,338.5,457,422.2,429.99c87.72-28.31-71.17-110.68,22.64-190.57
        c54.07-46.05,161.79-22.03,138.18,79.89c-13.69,59.11-53.79,87.21-30.99,132.4c0,0,20.26,23.49,61.35,18.96"/>
</g>
<g id="avatar" transform="translate(10,20)">
    <g>
        <g>
            <circle class="st9" cx="276.22" cy="290.06" r="26.83"/>
            <path class="st8" d="M276.22,317.69c-15.23,0-27.62-12.39-27.62-27.62s12.39-27.62,27.62-27.62s27.62,12.39,27.62,27.62
                S291.45,317.69,276.22,317.69z M276.22,264.04c-14.35,0-26.03,11.68-26.03,26.03s11.68,26.03,26.03,26.03
                s26.03-11.68,26.03-26.03S290.57,264.04,276.22,264.04z"/>
        </g>
        <g>
            <g>
                <path class="st16" d="M264.95,293.51c-0.35-0.11-0.74,0.03-0.93,0.35l-4.62,7.56c-0.35,0.58,0.02,1.33,0.7,1.39
                    c3.16,0.29,11.31,1.43,23.76,5.78c0.44,0.15,0.86-0.3,0.65-0.73C283.15,305.1,278.44,297.84,264.95,293.51z"/>
            </g>
            <g>
                <path class="st16" d="M284.68,279.17c-2.01-6.83-8.8-10.85-15.17-8.97c-0.04,0.01-0.09,0.03-0.13,0.04
                    c-0.06-0.01-0.13-0.01-0.19-0.02c-0.07,0.05-0.13,0.09-0.19,0.14c-6.04,2.09-9.34,8.94-7.39,15.59c0,0-0.76,2.95-2.22,5.82
                    c0,0,6.79-0.4,8.31-7.6c0,0,0.02,0.05,0,0l9.33-2.75c0.01,0.03,0,0,0,0c8.13,6.32,13.75,1.44,13.75,1.44
                    S287.35,280.89,284.68,279.17z"/>
            </g>
            <g>
                <path class="st8" d="M296.91,298.57c-0.04-0.3-0.29-0.52-0.59-0.52h-3.56c-0.33,0-0.6,0.27-0.6,0.6c0,1.34-0.33,1.94-0.6,2.2
                    c-0.18,0.18-0.4,0.27-0.65,0.26c-0.47-0.01-1.14-0.76-1.62-1.83c-1.25-2.77-3.05-3.78-4.49-4.12v-1.83
                    c0-0.07,0.06-0.12,0.12-0.12h1.72c0.09,0,0.19-0.02,0.27-0.06c0.25-0.12,0.37-0.39,0.33-0.64c-0.46-2.69-1.3-5.53-1.85-7.27
                    c3.56-0.05,5.75-1.89,5.78-1.92c0.15-0.13,0.22-0.32,0.2-0.51c-0.02-0.19-0.13-0.36-0.3-0.46c-0.03-0.02-3.07-1.76-5.62-3.38
                    c-0.17-0.11-0.31-0.28-0.37-0.47c-2.19-6.54-8.67-10.46-14.95-9.07l0.35-0.89c0.12-0.31-0.04-0.67-0.36-0.78
                    c-0.31-0.11-0.65,0.07-0.77,0.37l-0.34,0.87c-0.05,0.14-0.23,0.19-0.35,0.1l-0.69-0.52c-0.27-0.2-0.65-0.14-0.85,0.13
                    c-0.19,0.27-0.11,0.64,0.15,0.84l0.74,0.55c-5.7,2.43-8.79,9.05-7.12,15.55c0.05,0.2,0.04,0.4-0.03,0.59
                    c-0.34,0.99-1.18,3.34-2.03,5.27c-0.07,0.15-0.08,0.32-0.02,0.47c0.09,0.24,0.32,0.38,0.56,0.38c0.01,0,0.03,0,0.04,0
                    c0.04,0,2.17-0.17,4.39-1.48c0.22,0.56,0.48,1.26,0.69,2.01c-0.4,0.06-0.78,0.29-1,0.66c0,0,0,0,0,0l-4.62,7.56
                    c-0.28,0.45-0.3,1-0.06,1.47c0.24,0.47,0.69,0.78,1.21,0.83c2.93,0.27,11.11,1.37,23.62,5.75c0.12,0.04,0.25,0.06,0.37,0.06
                    c0.32,0,0.62-0.13,0.84-0.38c0.3-0.34,0.37-0.83,0.17-1.24c-0.72-1.48-2.29-4.05-5.38-6.8c0.84,0.21,1.68,0.35,2.49,0.42
                    c0.07,0.01,0.14,0.01,0.2,0.01c0.64,0,1.26-0.23,1.72-0.66c0.47-0.43,0.72-1.02,0.72-1.67v-2.29c2.23,0.86,2.77,2.18,3.39,3.7
                    c0.38,0.93,0.76,1.89,1.54,2.82c0.8,0.96,1.75,1.43,2.91,1.43c0.27,0,0.56-0.03,0.85-0.08
                    C296.75,303.92,297.15,300.37,296.91,298.57z M285.22,280.22c1.65,1.04,3.43,2.09,4.44,2.68c-1.61,0.93-5.77,2.54-11.3-1.25
                    l5.51-1.62C284.32,279.9,284.81,279.97,285.22,280.22z M272.69,270.34c4.78,0,9.32,3.21,11.14,8.16
                    c0.05,0.15-0.03,0.3-0.18,0.35l-5.99,1.76c-0.1,0.03-0.21-0.03-0.24-0.14c-0.25-1-0.74-2.77-1.58-4.6
                    c-1.2-2.63-2.68-4.48-4.37-5.47C271.89,270.36,272.29,270.34,272.69,270.34z M269.12,271.08c0.15-0.15,0.37-0.21,0.57-0.15
                    c4.12,1.11,6.06,7.7,6.59,9.9c0.02,0.1-0.03,0.2-0.13,0.23l-7.73,2.27c-0.1,0.03-0.2-0.02-0.23-0.12
                    C267.48,281.06,265.68,274.45,269.12,271.08z M266.97,272c-0.94,1.77-1.27,4.06-0.98,6.79c0.22,2.01,0.72,3.77,1.04,4.74
                    c0.03,0.1-0.02,0.21-0.13,0.24l-4.61,1.35c-0.15,0.04-0.3-0.05-0.34-0.2C260.81,279.76,262.91,274.58,266.97,272z
                     M261.95,286.82c0.08-0.24,0.28-0.42,0.52-0.49l4.57-1.34c-1.35,4.32-4.91,5.64-6.67,6.03
                    C261.03,289.4,261.63,287.72,261.95,286.82z M283.89,307.97c-12.54-4.37-20.77-5.48-23.74-5.75c-0.16-0.01-0.23-0.13-0.25-0.17
                    c-0.02-0.05-0.07-0.18,0.01-0.31c0,0,4.62-7.56,4.62-7.56c0.05-0.08,0.15-0.12,0.24-0.09c4.49,1.44,8.93,3.51,12.67,6.42
                    C280.02,302.53,282.4,305.02,283.89,307.97z M283.61,292.61v6.31c0,0.39-0.19,0.64-0.34,0.79c-0.26,0.24-0.63,0.36-1.02,0.33
                    c-1.17-0.09-2.44-0.37-3.64-0.79c-1.06-0.37-2.07-0.89-3.02-1.5c-1.62-1.04-3.49-2.05-5.65-2.99l0.5-2.38
                    c0.07-0.31-0.13-0.6-0.44-0.7c-1.28-0.42-1.67-1.57-1.78-2.09c-0.27-1.19,0.05-2.43,0.76-3.03c1.42-1.2,2.76-0.33,2.89-0.25
                    c0.24,0.15,0.43,0.18,0.67,0.05c0.11-0.06,0.19-0.19,0.22-0.29c0.29-0.78,0.7-2.03,1.06-3.08l3.08-0.91
                    c2.69,2.03,5.14,2.88,7.21,3.1c0.49,1.49,1.29,4.12,1.8,6.69c0.02,0.08-0.04,0.15-0.12,0.15h-1.58
                    C283.88,292.01,283.61,292.28,283.61,292.61z"/>
            </g>
        </g>
    </g>
</g>

</svg>

Answer 1

为了获取路径上某个点的位置，您需要使用 path.getPointAtLength .

这是我所做的:

我已将头像移至 <defs>元素，以便我稍后可以使用它。此外，我还翻译了 svg Canvas 起源中头像中的所有内容。
<use>元素可以获得 x 和 y 属性，以便能够在 svg Canvas 上定位所使用的元素。在 Javascript 中，我使用 path.getPointAtLength 计算头像的 x 和 y方法。

在此演示中，输入类型范围会更改头像在路径上的位置；

在您的代码中，您有 transform头像的属性。我将此转换用于 use 元素。

另外:对于演示，我更改了 viewBox 的值svg 元素的属性。您可以将其改回您想要的值。

let pathlength = path.getTotalLength();
let pos = path.getPointAtLength(0);


theUse.setAttributeNS(null,"x", pos.x);
theUse.setAttributeNS(null,"y", pos.y);


theRange.addEventListener("input", ()=>{
  let perc = parseInt(theRange.value);
  let leng = pathlength * perc/100;
  pos = path.getPointAtLength(leng);
  theUse.setAttributeNS(null,"x", pos.x);
  theUse.setAttributeNS(null,"y", pos.y);
})

svg{border:1px solid;overflow:visible; width:95vh; display:block; margin:1em auto;}

<input type="range" id="theRange" value="0"/>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="230 200 400 300" xml:space="preserve">
<style type="text/css">
    .st5{fill:#43A592;stroke:#8C6239;stroke-width:0.5;stroke-miterlimit:10;}
    .st6{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;}
    .st7{fill:none;stroke:#603813;stroke-width:8;stroke-linecap:square;stroke-miterlimit:10;stroke-dasharray:5.0414,12.0993;}
    .st8{fill:#405813;}
    .st9{fill:#7FBFD6;}
</style>
  <defs>
    <g id="avatar"  transform="translate(-276.22, -290.06)">
    <g>
        <g>
            <circle class="st9" cx="276.22" cy="290.06" r="26.83"/>
            <path class="st8" d="M276.22,317.69c-15.23,0-27.62-12.39-27.62-27.62s12.39-27.62,27.62-27.62s27.62,12.39,27.62,27.62
                S291.45,317.69,276.22,317.69z M276.22,264.04c-14.35,0-26.03,11.68-26.03,26.03s11.68,26.03,26.03,26.03
                s26.03-11.68,26.03-26.03S290.57,264.04,276.22,264.04z"/>
        </g>
        <g>
            <g>
                <path class="st16" d="M264.95,293.51c-0.35-0.11-0.74,0.03-0.93,0.35l-4.62,7.56c-0.35,0.58,0.02,1.33,0.7,1.39
                    c3.16,0.29,11.31,1.43,23.76,5.78c0.44,0.15,0.86-0.3,0.65-0.73C283.15,305.1,278.44,297.84,264.95,293.51z"/>
            </g>
            <g>
                <path class="st16" d="M284.68,279.17c-2.01-6.83-8.8-10.85-15.17-8.97c-0.04,0.01-0.09,0.03-0.13,0.04
                    c-0.06-0.01-0.13-0.01-0.19-0.02c-0.07,0.05-0.13,0.09-0.19,0.14c-6.04,2.09-9.34,8.94-7.39,15.59c0,0-0.76,2.95-2.22,5.82
                    c0,0,6.79-0.4,8.31-7.6c0,0,0.02,0.05,0,0l9.33-2.75c0.01,0.03,0,0,0,0c8.13,6.32,13.75,1.44,13.75,1.44
                    S287.35,280.89,284.68,279.17z"/>
            </g>
            <g>
                <path class="st8" d="M296.91,298.57c-0.04-0.3-0.29-0.52-0.59-0.52h-3.56c-0.33,0-0.6,0.27-0.6,0.6c0,1.34-0.33,1.94-0.6,2.2
                    c-0.18,0.18-0.4,0.27-0.65,0.26c-0.47-0.01-1.14-0.76-1.62-1.83c-1.25-2.77-3.05-3.78-4.49-4.12v-1.83
                    c0-0.07,0.06-0.12,0.12-0.12h1.72c0.09,0,0.19-0.02,0.27-0.06c0.25-0.12,0.37-0.39,0.33-0.64c-0.46-2.69-1.3-5.53-1.85-7.27
                    c3.56-0.05,5.75-1.89,5.78-1.92c0.15-0.13,0.22-0.32,0.2-0.51c-0.02-0.19-0.13-0.36-0.3-0.46c-0.03-0.02-3.07-1.76-5.62-3.38
                    c-0.17-0.11-0.31-0.28-0.37-0.47c-2.19-6.54-8.67-10.46-14.95-9.07l0.35-0.89c0.12-0.31-0.04-0.67-0.36-0.78
                    c-0.31-0.11-0.65,0.07-0.77,0.37l-0.34,0.87c-0.05,0.14-0.23,0.19-0.35,0.1l-0.69-0.52c-0.27-0.2-0.65-0.14-0.85,0.13
                    c-0.19,0.27-0.11,0.64,0.15,0.84l0.74,0.55c-5.7,2.43-8.79,9.05-7.12,15.55c0.05,0.2,0.04,0.4-0.03,0.59
                    c-0.34,0.99-1.18,3.34-2.03,5.27c-0.07,0.15-0.08,0.32-0.02,0.47c0.09,0.24,0.32,0.38,0.56,0.38c0.01,0,0.03,0,0.04,0
                    c0.04,0,2.17-0.17,4.39-1.48c0.22,0.56,0.48,1.26,0.69,2.01c-0.4,0.06-0.78,0.29-1,0.66c0,0,0,0,0,0l-4.62,7.56
                    c-0.28,0.45-0.3,1-0.06,1.47c0.24,0.47,0.69,0.78,1.21,0.83c2.93,0.27,11.11,1.37,23.62,5.75c0.12,0.04,0.25,0.06,0.37,0.06
                    c0.32,0,0.62-0.13,0.84-0.38c0.3-0.34,0.37-0.83,0.17-1.24c-0.72-1.48-2.29-4.05-5.38-6.8c0.84,0.21,1.68,0.35,2.49,0.42
                    c0.07,0.01,0.14,0.01,0.2,0.01c0.64,0,1.26-0.23,1.72-0.66c0.47-0.43,0.72-1.02,0.72-1.67v-2.29c2.23,0.86,2.77,2.18,3.39,3.7
                    c0.38,0.93,0.76,1.89,1.54,2.82c0.8,0.96,1.75,1.43,2.91,1.43c0.27,0,0.56-0.03,0.85-0.08
                    C296.75,303.92,297.15,300.37,296.91,298.57z M285.22,280.22c1.65,1.04,3.43,2.09,4.44,2.68c-1.61,0.93-5.77,2.54-11.3-1.25
                    l5.51-1.62C284.32,279.9,284.81,279.97,285.22,280.22z M272.69,270.34c4.78,0,9.32,3.21,11.14,8.16
                    c0.05,0.15-0.03,0.3-0.18,0.35l-5.99,1.76c-0.1,0.03-0.21-0.03-0.24-0.14c-0.25-1-0.74-2.77-1.58-4.6
                    c-1.2-2.63-2.68-4.48-4.37-5.47C271.89,270.36,272.29,270.34,272.69,270.34z M269.12,271.08c0.15-0.15,0.37-0.21,0.57-0.15
                    c4.12,1.11,6.06,7.7,6.59,9.9c0.02,0.1-0.03,0.2-0.13,0.23l-7.73,2.27c-0.1,0.03-0.2-0.02-0.23-0.12
                    C267.48,281.06,265.68,274.45,269.12,271.08z M266.97,272c-0.94,1.77-1.27,4.06-0.98,6.79c0.22,2.01,0.72,3.77,1.04,4.74
                    c0.03,0.1-0.02,0.21-0.13,0.24l-4.61,1.35c-0.15,0.04-0.3-0.05-0.34-0.2C260.81,279.76,262.91,274.58,266.97,272z
                     M261.95,286.82c0.08-0.24,0.28-0.42,0.52-0.49l4.57-1.34c-1.35,4.32-4.91,5.64-6.67,6.03
                    C261.03,289.4,261.63,287.72,261.95,286.82z M283.89,307.97c-12.54-4.37-20.77-5.48-23.74-5.75c-0.16-0.01-0.23-0.13-0.25-0.17
                    c-0.02-0.05-0.07-0.18,0.01-0.31c0,0,4.62-7.56,4.62-7.56c0.05-0.08,0.15-0.12,0.24-0.09c4.49,1.44,8.93,3.51,12.67,6.42
                    C280.02,302.53,282.4,305.02,283.89,307.97z M283.61,292.61v6.31c0,0.39-0.19,0.64-0.34,0.79c-0.26,0.24-0.63,0.36-1.02,0.33
                    c-1.17-0.09-2.44-0.37-3.64-0.79c-1.06-0.37-2.07-0.89-3.02-1.5c-1.62-1.04-3.49-2.05-5.65-2.99l0.5-2.38
                    c0.07-0.31-0.13-0.6-0.44-0.7c-1.28-0.42-1.67-1.57-1.78-2.09c-0.27-1.19,0.05-2.43,0.76-3.03c1.42-1.2,2.76-0.33,2.89-0.25
                    c0.24,0.15,0.43,0.18,0.67,0.05c0.11-0.06,0.19-0.19,0.22-0.29c0.29-0.78,0.7-2.03,1.06-3.08l3.08-0.91
                    c2.69,2.03,5.14,2.88,7.21,3.1c0.49,1.49,1.29,4.12,1.8,6.69c0.02,0.08-0.04,0.15-0.12,0.15h-1.58
                    C283.88,292.01,283.61,292.28,283.61,292.61z"/>
            </g>
        </g>
    </g>
</g>
  </defs>
<g>
    <path class="st7" id="path" d="M253.83,291.92C438.6,278.28,338.5,457,422.2,429.99c87.72-28.31-71.17-110.68,22.64-190.57
        c54.07-46.05,161.79-22.03,138.18,79.89c-13.69,59.11-53.79,87.21-30.99,132.4c0,0,20.26,23.49,61.35,18.96"/>
</g>

<use id="theUse"  transform="translate(0,20)" xlink:href="#avatar" />
</svg>