css动画 —— 自定义不规则的动画路径 offset-path （含不规则的动画路径参数获取方法）

<template>
    <div>
        <span class="love_move">love</span>
        <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
            <g>
                <title>background</title>
                <rect fill="white" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
                <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
                </g>
            </g>
            <g>
                <title>Layer 1</title>
                <path id="svg_2"
                      d="m264.72273,137.28284c52.77378,-129.9431 259.54318,0 0,167.0697c-259.54318,-167.0697 -52.77378,-297.01281 0,-167.0697z"
                      stroke-width="1.5" stroke="red" fill="red"/>
            </g>
        </svg>
    </div>
</template>
<script>
    export default {}
</script>
<style scoped>
    .love_move {
        position: absolute;
        font-size: 20px;
        offset-path: path("m264.72273,137.28284c52.77378,-129.9431 259.54318,0 0,167.0697c-259.54318,-167.0697 -52.77378,-297.01281 0,-167.0697z");
        animation: move 6s linear infinite;
    }
 
    @keyframes move {
        100% {offset-distance: 100%;}
    }
</style>