想要拓扑图的svg组件有动态效果。比如下面这个svg,使用svg组件可以是动态效果。
- <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128">
- <path d="M970.854 601.682c-16.404-104.223-114.176-166.86-236.36-153.344-51.046 5.632-141.28 48.107-152.422 21.35C562.637 378.47 676.69 351.98 759.89 347.73c108.442-5.56 144.558-67.43 91.904-161.075-56.3-100.127-197.53-160.594-289.659-124.017-94.792 37.632-134.062 141.066-105.093 279.204 7.424 35.174 41.677 81.869-13.599 96.666-41.185 11.059-68.526-29.901-78.817-71.22-8.192-33.024-16.742-66.478-19.835-100.25-10.731-117.473-74.752-147.527-174.234-80.127C71.844 253.829 22.415 382.546 68.721 470.559c59.156 112.435 160.43 121.497 271.052 97.044 35.707-7.905 83.887-41.523 97.352 15.34 9.011 38.144-32.768 63.693-72.653 79.001-33.382 12.841-66.017 16.794-100.987 18.524-110.417 5.438-142.254 64.646-88.248 160.205 56.699 100.383 200.448 158.925 291.072 118.559 102.165-45.496 160.051-164.526 107.213-304.148-4.608-25.396-35.277-57.037-5.806-70.503 28.18-12.851 53.197 8.827 67.092 28.775 32.564 46.796 46.49 97.69 40.09 158.689-7.957 75.827 34.509 112.455 113.357 98.099 102.84-18.76 199.547-160.748 182.6-268.462z m-462.56-48.998c-22.17 0-40.142-17.972-40.142-40.141 0-22.17 17.972-40.141 40.141-40.141 22.17 0 40.14 17.971 40.14 40.14 0 22.17-17.96 40.142-40.14 40.142z m0 0" fill="#0cce19" p-id="8088">
- </path>
- <animateTransform
- attributeName="transform"
- type="rotate"
- from="0 0 0"
- to="360 0 0"
- dur="2s"
- repeatCount="indefinite"
- />
- </svg>
复制代码
|
|