搜索
搜索

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

debugcn 发表于 Dev
8
乔治

我以前从未处理过任何 SVG 代码，但我现在需要将一些 SVG 线宽从 0 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

看起来我无法使用关键帧为圆角图表设置动画

罗伯特·朗森

如果要为笔划设置动画，则必须实际有一个笔划，否则您正在为未渲染的内容设置动画。 

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何为SVG群组元素设置动画（基本缩放）

来自分类Dev

如何为SVG的整个“路径”元素设置动画？

来自分类Dev

如何使用SVG中的标记为更改的路径长度（线）设置动画

来自分类Dev

如何为单个SVG多边形点设置动画？

来自分类Dev

如何为终端线路设置别名？

来自分类Dev

如何为svg路径填充javascript而不是HTML设置动画

来自分类Dev

如何为SVG元素中定义的剪切路径设置动画？

来自分类Dev

如何为SVG的某些部分制作动画

来自分类Dev

如何为多边形设置动画以通过SVG旋转到位？

来自分类Dev

如何为SVG中的正方形内的圆制作动画（为嵌套的svg制作动画）？

来自分类Dev

如何为SVG波动图像制作动画？

来自分类Dev

如何为SVG矩形动画以从下到上填充？

来自分类Dev

如何为SVG群组整体制作动画？

来自分类Dev

如何为SVG群组元素设置动画（基本缩放）

来自分类Dev

如何使用snap.svg设置路径变形的动画

来自分类Dev

如何为SVG图像中的云图标设置动画

来自分类Dev

如何为封闭的svg路径创建动画

来自分类Dev

如何为序列中的svg动画计时？

来自分类Dev

如何为这条路径设置动画？

来自分类Dev

如何在jQuery中设置SVG路径的动画

来自分类Dev

如何使用jQuery / JavaScript为SVG路径设置动画？

来自分类Dev

如何为svg矩形设置动画以使其像音乐波一样增长？

来自分类Dev

如何为圆弧设置 SVG 路径动画？

来自分类Dev

如何绘制svg路径动画

来自分类Dev

如何堆叠和动画 2 svg 路径？

来自分类Dev

如何为 SVG 设置动画（使用多边形，而不是路径）？

来自分类Dev

如何为非硬编码的 SVG 设置动画？

来自分类Dev

如何为参考 SVG 背景设置动画

来自分类Dev

在 SVG 路径中为 SVG 设置动画

Related 相关文章

  1. 1

    如何为SVG群组元素设置动画（基本缩放）

  2. 2

    如何为SVG的整个“路径”元素设置动画？

  3. 3

    如何使用SVG中的标记为更改的路径长度（线）设置动画

  4. 4

    如何为单个SVG多边形点设置动画？

  5. 5

    如何为终端线路设置别名？

  6. 6

    如何为svg路径填充javascript而不是HTML设置动画

  7. 7

    如何为SVG元素中定义的剪切路径设置动画？

  8. 8

    如何为SVG的某些部分制作动画

  9. 9

    如何为多边形设置动画以通过SVG旋转到位？

  10. 10

    如何为SVG中的正方形内的圆制作动画（为嵌套的svg制作动画）？

  11. 11

    如何为SVG波动图像制作动画？

  12. 12

    如何为SVG矩形动画以从下到上填充？

  13. 13

    如何为SVG群组整体制作动画？

  14. 14

    如何为SVG群组元素设置动画（基本缩放）

  15. 15

    如何使用snap.svg设置路径变形的动画

  16. 16

    如何为SVG图像中的云图标设置动画

  17. 17

    如何为封闭的svg路径创建动画

  18. 18

    如何为序列中的svg动画计时？

  19. 19

    如何为这条路径设置动画？

  20. 20

    如何在jQuery中设置SVG路径的动画

  21. 21

    如何使用jQuery / JavaScript为SVG路径设置动画？

  22. 22

    如何为svg矩形设置动画以使其像音乐波一样增长？

  23. 23

    如何为圆弧设置 SVG 路径动画？

  24. 24

    如何绘制svg路径动画

  25. 25

    如何堆叠和动画 2 svg 路径？

  26. 26

    如何为 SVG 设置动画（使用多边形，而不是路径）？

  27. 27

    如何为非硬编码的 SVG 设置动画？

  28. 28

    如何为参考 SVG 背景设置动画

  29. 29

    在 SVG 路径中为 SVG 设置动画

热门标签

归档