如何为SVG线路径设置动画？

Question

我以前从未处理过任何SVG代码，但现在我需要使一些SVG线的宽度从零开始100％动画：

<svg viewBox="0 0 93 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <g id="intro_graphics">
        <g id="bg_curves">
            <path d="M0.002,192l0,-192" style="fill:none;stroke:url(#_Linear1);stroke-width:0.48px;"/>
            <path d="M31.165,192l0,-192" style="fill:none;stroke:url(#_Linear2);stroke-width:0.48px;"/>
            <path d="M62.493,192l0,-192" style="fill:none;stroke:url(#_Linear3);stroke-width:0.48px;"/>
            <path d="M92.206,192l0,-192" style="fill:none;stroke:url(#_Linear4);stroke-width:0.48px;"/>
        </g>
        <g id="ilustration_curves">
            <path d="M47.715,89.243c5.388,4.727 8.791,11.662 8.791,19.385c0,14.229 -11.552,25.782 -25.782,25.782c-13.465,0 -24.534,-10.346 -25.683,-23.516c-0.065,-0.747 -0.074,-1.503 -0.098,-2.266c-0.065,-2.082 3.285,-3 3.567,0c0.073,0.776 0.04,1.55 0.118,2.309c1.157,11.177 10.615,19.906 22.096,19.906c12.261,0 22.215,-9.954 22.215,-22.215c0,-5.447 -1.965,-10.439 -5.224,-14.305l0,-5.08Z" style="fill:url(#_Linear5);"/>
            <clipPath id="_clip6">
                <path d="M43.213,93.869c4.098,3.52 6.695,8.738 6.695,14.559c0,10.588 -8.596,19.184 -19.184,19.184c-7.84,0 -14.588,-4.713 -17.563,-11.459c-0.174,-0.394 -0.404,-0.865 -0.55,-1.232c-0.581,-1.454 1.78,-3.398 3.122,-0.978c0.178,0.32 0.973,1.849 1.174,2.21c2.711,4.835 7.885,8.104 13.817,8.104c8.737,0 15.83,-7.093 15.83,-15.829c0,-3.665 -1.248,-7.04 -3.341,-9.724l0,-4.835Z"/>
            </clipPath>
            <g clip-path="url(#_clip6)">
                <use xlink:href="#_Image7" x="12.725" y="94.585" width="37.388px" height="33.743px" transform="matrix(0.983896,0,0,0.992433,-1.09139e-13,0)"/>
            </g>
            <clipPath id="_clip8">
                <path d="M15.61,133.301c4.37,2.766 9.556,4.369 15.114,4.369c15.577,0 28.223,-12.587 28.223,-28.091c0,-11.633 -7.12,-21.624 -17.255,-25.888l0,-3.986c12.163,4.472 20.85,16.167 20.85,29.874c0,17.561 -14.257,31.818 -31.818,31.818c-8.138,0 -15.567,-3.062 -21.196,-8.096c0,0 -0.531,-0.52 -0.967,-1.016c-1.683,-1.912 0.543,-4.303 3.181,-1.802c1.109,1.051 3.868,2.818 3.868,2.818Z"/>
            </clipPath>
            <g clip-path="url(#_clip8)">
                <use xlink:href="#_Image9" x="8.04" y="81.103" width="54.566px" height="60.697px" transform="matrix(0.992101,0,0,0.995029,-1.09139e-13,0)"/>
            </g>
        </g>
        <g id="plus_symbol">
            <path d="M35.917,110.551c0,-0.454 -0.368,-0.823 -0.823,-0.823l-7.76,0c-0.454,0 -0.823,0.369 -0.823,0.823c0,0.454 0.369,0.823 0.823,0.823l7.76,0c0.455,0 0.823,-0.369 0.823,-0.823Z" style="fill:#bf5af0;"/>
            <path d="M31.214,105.848c-0.454,0 -0.823,0.369 -0.823,0.823l0,7.76c0,0.454 0.369,0.823 0.823,0.823c0.455,0 0.823,-0.369 0.823,-0.823l0,-7.76c0,-0.454 -0.368,-0.823 -0.823,-0.823Z" style="fill:#bf5af0;"/>
        </g>
    </g>
    <defs>
        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,0.00180094,172.335)">
            <stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
            <stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
        </linearGradient>
        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,31.1652,172.335)">
            <stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
            <stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
        </linearGradient>
        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,62.4932,172.335)">
            <stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
            <stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
        </linearGradient>
        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,92.2062,172.335)">
            <stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
            <stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
        </linearGradient>
        <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-7.79155,25.3988,-25.3988,-7.79155,40.0035,91.6304)">
            <stop offset="0" style="stop-color:#bf5af0;stop-opacity:0"/>
            <stop offset="1" style="stop-color:#bf5af0;stop-opacity:1"/>
        </linearGradient>
        <image id="_Image7" width="38px" height="34px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAiCAYAAAAzrKu4AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABKElEQVRYhe3VUQqDMAwG4F/nJmxX8Qw7jcfyWF6m0Ooe1rgSrFZt0z4sEIhM5CN1v1U3qDcAbds4M7/2/jb27YTI1QB4bWCCcN2gljkWsgHw3MEEbw6AsUja5HwFRhuLhqOZbfIQkh9ldBxd0ybHvtWhMH6UyXD4bVEDMFtI31EmxVF3g3L/2cYHy4Jjm6T30ezFhSiO5m5QOiQusuBC40IcdyQuRHHicRF6b9a42Lq3mLjgc5FxQbB/XBx5TtFxAXy/mQ2AuRQcwagqhsyG4zCOvNuepHFbMLdq24RMjguFceTDzoSMjjsDW0M+nIdHwV2FuXWzjRi4mLA1ZHsWlwrmli8jdz9JUrWWkZfjIgWSMtINctGj3Cse5OJHGVJLRtaZId4qFvYBLcFgs65CS6MAAAAASUVORK5CYII="/>
        <image id="_Image9" width="55px" height="61px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA9CAYAAAAJQPEgAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB6klEQVRoge2YUZKDIBBEO6u7XoZjeSyO5WX8EPcnWEQRBgPMYDlVVOWnY7f9QlAoPXdKzy/ccHoAfwCM0rMBYKZxWJg9ZZsewC8AY5fSc2c/T+NgOM19O4dw+Ay6fZ7GYWVzeXE2LJ21IBC0pTZ9zXU4htsCt9RmEEuEAxul5wWC2yRjebI6HNsUE5SKJTm0JGypWEZ/i77FvQn5sExBkxSYq82z5pJbomprtlkUy5DW7rQo2GYVLGPaUufa6liGVu5zLRuWMX2OTagEltlbvroJpWBZBc2QNrVN2xyr6StayrnWNifGdKo2dK4NbSjNBd5j2yyWMa3Ss2key5D2VljutS1jGdVLxDLbtWtiWf2G5cCSs+XLWIo1TdXGngpEmqZq3aeCZkxTtW5zzZimah8spZmmau+I5aZvCctkvQQsi127JJacN+wyluymqdr9q70mTFO1++aaME3VUt44izNN1T5YSjNN1T5YSjNN1UvG8utrc2BZ7Yb1AF7vLzkzIs40Vdvjc37eC5JNU7X7cL6gqzTTVG0onJ0zbMUHpoRzx21TVEs+bWo4OymbkGgsY+NuQk1jGRvbpost2yEgdzg7LrZsh4BS4dzxbUJVDgE1wtmhbEJZW64Zzp3YX0qWwFzh7LhtrsiM5T8/PF/5U2UUDQAAAABJRU5ErkJggg=="/>
    </defs>
</svg>

这是非常丑陋的代码。 这是Codepen示例：https://codepen.io/trueweb/pen/OJLpLNB

我对CSS关键帧做了类似的事情： https://codepen.io/trueweb/pen/xxKZrBX

我似乎无法使用关键帧为四舍五入的图表制作动画

Answer 1

如果要为笔触设置动画，则实际上必须有笔触，否则将对未渲染的内容进行动画处理。

svg {
  width: 300px;
}

svg .line {
  stroke: red;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: dash 13s linear;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000; 
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewBox="0 0 93 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
	<g id="intro_graphics">
		<g id="bg_curves">
			<path d="M0.002,192l0,-192" style="fill:none;stroke:url(#_Linear1);stroke-width:0.48px;"/>
			<path d="M31.165,192l0,-192" style="fill:none;stroke:url(#_Linear2);stroke-width:0.48px;"/>
			<path d="M62.493,192l0,-192" style="fill:none;stroke:url(#_Linear3);stroke-width:0.48px;"/>
			<path d="M92.206,192l0,-192" style="fill:none;stroke:url(#_Linear4);stroke-width:0.48px;"/>
		</g>
		<g id="ilustration_curves">
			<path class="line" d="M47.715,89.243c5.388,4.727 8.791,11.662 8.791,19.385c0,14.229 -11.552,25.782 -25.782,25.782c-13.465,0 -24.534,-10.346 -25.683,-23.516c-0.065,-0.747 -0.074,-1.503 -0.098,-2.266c-0.065,-2.082 3.285,-3 3.567,0c0.073,0.776 0.04,1.55 0.118,2.309c1.157,11.177 10.615,19.906 22.096,19.906c12.261,0 22.215,-9.954 22.215,-22.215c0,-5.447 -1.965,-10.439 -5.224,-14.305l0,-5.08Z" style="fill:url(#_Linear5);" stroke="black"/>
			<clipPath id="_clip6">
				<path class="line" d="M43.213,93.869c4.098,3.52 6.695,8.738 6.695,14.559c0,10.588 -8.596,19.184 -19.184,19.184c-7.84,0 -14.588,-4.713 -17.563,-11.459c-0.174,-0.394 -0.404,-0.865 -0.55,-1.232c-0.581,-1.454 1.78,-3.398 3.122,-0.978c0.178,0.32 0.973,1.849 1.174,2.21c2.711,4.835 7.885,8.104 13.817,8.104c8.737,0 15.83,-7.093 15.83,-15.829c0,-3.665 -1.248,-7.04 -3.341,-9.724l0,-4.835Z" stroke="black"/>
			</clipPath>
			<g clip-path="url(#_clip6)">
				<use xlink:href="#_Image7" x="12.725" y="94.585" width="37.388px" height="33.743px" transform="matrix(0.983896,0,0,0.992433,-1.09139e-13,0)"/>
			</g>
			<clipPath id="_clip8">
				<path class="line" d="M15.61,133.301c4.37,2.766 9.556,4.369 15.114,4.369c15.577,0 28.223,-12.587 28.223,-28.091c0,-11.633 -7.12,-21.624 -17.255,-25.888l0,-3.986c12.163,4.472 20.85,16.167 20.85,29.874c0,17.561 -14.257,31.818 -31.818,31.818c-8.138,0 -15.567,-3.062 -21.196,-8.096c0,0 -0.531,-0.52 -0.967,-1.016c-1.683,-1.912 0.543,-4.303 3.181,-1.802c1.109,1.051 3.868,2.818 3.868,2.818Z"/>
			</clipPath>
			<g clip-path="url(#_clip8)">
				<use xlink:href="#_Image9" x="8.04" y="81.103" width="54.566px" height="60.697px" transform="matrix(0.992101,0,0,0.995029,-1.09139e-13,0)"/>
			</g>
		</g>
		<g id="plus_symbol">
			<path d="M35.917,110.551c0,-0.454 -0.368,-0.823 -0.823,-0.823l-7.76,0c-0.454,0 -0.823,0.369 -0.823,0.823c0,0.454 0.369,0.823 0.823,0.823l7.76,0c0.455,0 0.823,-0.369 0.823,-0.823Z" style="fill:#bf5af0;"/>
			<path d="M31.214,105.848c-0.454,0 -0.823,0.369 -0.823,0.823l0,7.76c0,0.454 0.369,0.823 0.823,0.823c0.455,0 0.823,-0.369 0.823,-0.823l0,-7.76c0,-0.454 -0.368,-0.823 -0.823,-0.823Z" style="fill:#bf5af0;"/>
		</g>
	</g>
	<defs>
		<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,0.00180094,172.335)">
			<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
			<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
		</linearGradient>
		<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,31.1652,172.335)">
			<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
			<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
		</linearGradient>
		<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,62.4932,172.335)">
			<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
			<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
		</linearGradient>
		<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,92.2062,172.335)">
			<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
			<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
		</linearGradient>
		<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-7.79155,25.3988,-25.3988,-7.79155,40.0035,91.6304)">
			<stop offset="0" style="stop-color:#bf5af0;stop-opacity:0"/>
			<stop offset="1" style="stop-color:#bf5af0;stop-opacity:1"/>
		</linearGradient>
		<image id="_Image7" width="38px" height="34px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAiCAYAAAAzrKu4AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABKElEQVRYhe3VUQqDMAwG4F/nJmxX8Qw7jcfyWF6m0Ooe1rgSrFZt0z4sEIhM5CN1v1U3qDcAbds4M7/2/jb27YTI1QB4bWCCcN2gljkWsgHw3MEEbw6AsUja5HwFRhuLhqOZbfIQkh9ldBxd0ybHvtWhMH6UyXD4bVEDMFtI31EmxVF3g3L/2cYHy4Jjm6T30ezFhSiO5m5QOiQusuBC40IcdyQuRHHicRF6b9a42Lq3mLjgc5FxQbB/XBx5TtFxAXy/mQ2AuRQcwagqhsyG4zCOvNuepHFbMLdq24RMjguFceTDzoSMjjsDW0M+nIdHwV2FuXWzjRi4mLA1ZHsWlwrmli8jdz9JUrWWkZfjIgWSMtINctGj3Cse5OJHGVJLRtaZId4qFvYBLcFgs65CS6MAAAAASUVORK5CYII="/>
		<image id="_Image9" width="55px" height="61px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA9CAYAAAAJQPEgAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB6klEQVRoge2YUZKDIBBEO6u7XoZjeSyO5WX8EPcnWEQRBgPMYDlVVOWnY7f9QlAoPXdKzy/ccHoAfwCM0rMBYKZxWJg9ZZsewC8AY5fSc2c/T+NgOM19O4dw+Ay6fZ7GYWVzeXE2LJ21IBC0pTZ9zXU4htsCt9RmEEuEAxul5wWC2yRjebI6HNsUE5SKJTm0JGypWEZ/i77FvQn5sExBkxSYq82z5pJbomprtlkUy5DW7rQo2GYVLGPaUufa6liGVu5zLRuWMX2OTagEltlbvroJpWBZBc2QNrVN2xyr6StayrnWNifGdKo2dK4NbSjNBd5j2yyWMa3Ss2key5D2VljutS1jGdVLxDLbtWtiWf2G5cCSs+XLWIo1TdXGngpEmqZq3aeCZkxTtW5zzZimah8spZmmau+I5aZvCctkvQQsi127JJacN+wyluymqdr9q70mTFO1++aaME3VUt44izNN1T5YSjNN1T5YSjNN1UvG8utrc2BZ7Yb1AF7vLzkzIs40Vdvjc37eC5JNU7X7cL6gqzTTVG0onJ0zbMUHpoRzx21TVEs+bWo4OymbkGgsY+NuQk1jGRvbpost2yEgdzg7LrZsh4BS4dzxbUJVDgE1wtmhbEJZW64Zzp3YX0qWwFzh7LhtrsiM5T8/PF/5U2UUDQAAAABJRU5ErkJggg=="/>
	</defs>
</svg>