我刚刚开始玩SVG动画。是否可以使一个国家沿着随机的路径到达其在地图上的正确位置?我能想到的最好的办法就是打开盒子时组装拼图。 SVG动画甚至可能实现此功能,还是需要其他功能? 这就是我现在所拥有的
<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="500 180 2500 1500">
<g>
<path id="US-WA" d="m 1204.9427,925.58655 c -1.3898,1.54162 -3.5681,6.4786 -0.2995,5.99944 -2.5653,2.58922 -3.3814,8.57974 -8.3992,5.99945 -1.6219,3.81537 1.3975,1.05569 2.0998,3.29967 0.4051,1.29541 -0.1592,2.49675 -0.5999,3.59966 -0.574,1.43862 -1.0531,2.67841 -0.5999,4.19962 0.9522,3.19931 -7.9766,5.68493 -8.3992,9.89904 -0.3437,3.41803 -2.4129,5.35128 -4.7996,6.89936 -1.6428,1.06557 -3.5355,1.94896 -5.0995,2.99971 -1.0386,0.69641 -3.9323,3.80031 -5.3995,2.99974 -2.3214,-1.26485 -4.2692,-0.25119 -5.0995,2.09979 1.0922,-2.53862 0.4348,-2.72427 -1.7999,-0.89992 2.8988,-1.68447 2.8988,-2.18139 0,-1.49986 3.4375,-0.54169 5.4851,-4.00727 8.6992,-5.09951 -1.4791,0.92554 -2.2605,2.696 -2.0998,4.49958 1.1896,-1.31713 2.6821,-2.51823 4.1996,-3.59966 3.3001,-1.51067 7.1003,-7.47473 3.2997,-5.39949 1.1845,-3.59217 9.6433,-5.94207 8.3992,-9.29912 -0.7286,0.44537 -1.4265,0.73373 -2.0998,1.19988 0.5808,-0.54475 1.0436,-1.2686 1.1999,-1.79983 0.5241,-1.76484 -0.3734,-3.74478 0.6,-5.3995 -1.6785,0.33627 -2.8771,1.62713 -3.2997,3.2997 -0.03,-3.66061 -9.5411,-2.9717 -13.1988,-3.59966 -6.0712,-1.04164 -10.1546,-4.19955 -15.8985,-5.69945 -3.6011,-0.94045 -7.7344,10.52732 -7.4993,14.09865 0.4944,7.49384 -4.7149,14.61007 -6.8993,21.59794 0.5058,-0.7678 1.1629,-1.73608 1.7998,-2.39975 1.0981,1.3452 2.7199,2.51886 4.4996,2.39975 -3.8928,1.13991 -8.3028,1.07697 -8.9992,5.99945 1.7737,-0.30948 3.4305,0.0307 4.7996,1.19988 -4.3035,-1.98209 -5.6594,6.11962 -9.2991,6.89936 0.7055,-1.47317 1.2194,-2.97283 1.7998,-4.49958 -0.289,0.51433 -1.36,2.46258 -2.0998,4.19962 -0.9513,2.23333 -1.3747,4.25619 0.8994,3.89962 2.6815,-0.41969 3.9566,-1.05119 6.5994,0.29996 0.1604,0.0815 0.4166,0.19315 0.5999,0.29997 0.8697,0.50617 1.9523,1.19458 2.9997,1.49987 0.5194,-0.12589 1.4274,0.31936 1.7999,0 -0.3763,0.16368 -0.7881,0.34662 -1.1999,0.29996 3.0295,3.11021 2.4204,6.05171 1.7998,8.39921 -0.621,2.3475 -1.3217,4.091 1.1999,5.3995 2.5216,1.3085 5.1278,-0.2432 8.0992,-2.3998 2.9714,-2.1566 6.495,-4.746 10.4991,-5.0995 8.0082,-0.7071 17.5494,6.3653 27.5974,5.9994 10.0479,-0.3658 14.9111,-7.1919 30.597,-9.29907 7.843,-1.05361 20.1041,-3.77898 32.097,-4.79957 5.7862,-0.49243 11.3081,-0.53657 16.4985,0.29999 0.048,-0.37868 0.261,-0.83522 0.2994,-1.19991 0.5044,-4.62142 0.3005,-8.09921 0.3005,-8.09921 l 34.1968,-59.69438 z m -8.6991,14.69864 c -4.3838,2.4582 -7.1019,6.99959 -3.8997,11.69887 2.631,-0.41669 3.1785,-3.76633 0,-3.59966 1.4791,-1.87195 0,-4.22926 2.0998,-5.69946 1.2679,-0.88982 3.6689,-0.20029 1.7999,-2.39975 z m -14.6986,15.29853 c 1.1968,-0.62576 1.5042,-0.37032 -0.8995,2.09979 -0.8773,0.49186 -1.6983,1.11039 -2.6997,1.49987 -2.5356,0.99105 -6.2994,3.05843 -6.2994,6.29941 -0.7756,0.0354 -1.6623,-0.25208 -2.3998,-0.89991 2.8184,-2.25589 5.7052,-4.56967 8.6992,-6.59938 0.4713,-0.32138 2.4028,-1.77405 3.5996,-2.39978 z" />
<animate attributeType="XML" attributeName="x" from="600" to="1000"
dur="10s" repeatCount="indefinite" />
</g>
</svg>
非常感谢任何帮助或指针。谢谢
答案 0 :(得分:1)
路径元素没有x属性。不过,您可以使用变换动画来做同样的事情。
另外,动画元素必须是路径的子元素或指向路径的ID,即路径vi。最后,我检查了Chrome对带有ID值(包含来自SMIL的-符号)的元素的访问是否有错误,因此鉴于您拥有的ID就是我将animateTransform设置为路径的子代。
请注意,SMIL不能独自进行随机操作,您可以创建看起来像随机游走的物体,但是每次基本上都将是相同的。您可以通过javascript创建随机的SMIL动画。
<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="500 180 2500 1500">
<g>
<path id="US-WA" d="m 1204.9427,925.58655 c -1.3898,1.54162 -3.5681,6.4786 -0.2995,5.99944 -2.5653,2.58922 -3.3814,8.57974 -8.3992,5.99945 -1.6219,3.81537 1.3975,1.05569 2.0998,3.29967 0.4051,1.29541 -0.1592,2.49675 -0.5999,3.59966 -0.574,1.43862 -1.0531,2.67841 -0.5999,4.19962 0.9522,3.19931 -7.9766,5.68493 -8.3992,9.89904 -0.3437,3.41803 -2.4129,5.35128 -4.7996,6.89936 -1.6428,1.06557 -3.5355,1.94896 -5.0995,2.99971 -1.0386,0.69641 -3.9323,3.80031 -5.3995,2.99974 -2.3214,-1.26485 -4.2692,-0.25119 -5.0995,2.09979 1.0922,-2.53862 0.4348,-2.72427 -1.7999,-0.89992 2.8988,-1.68447 2.8988,-2.18139 0,-1.49986 3.4375,-0.54169 5.4851,-4.00727 8.6992,-5.09951 -1.4791,0.92554 -2.2605,2.696 -2.0998,4.49958 1.1896,-1.31713 2.6821,-2.51823 4.1996,-3.59966 3.3001,-1.51067 7.1003,-7.47473 3.2997,-5.39949 1.1845,-3.59217 9.6433,-5.94207 8.3992,-9.29912 -0.7286,0.44537 -1.4265,0.73373 -2.0998,1.19988 0.5808,-0.54475 1.0436,-1.2686 1.1999,-1.79983 0.5241,-1.76484 -0.3734,-3.74478 0.6,-5.3995 -1.6785,0.33627 -2.8771,1.62713 -3.2997,3.2997 -0.03,-3.66061 -9.5411,-2.9717 -13.1988,-3.59966 -6.0712,-1.04164 -10.1546,-4.19955 -15.8985,-5.69945 -3.6011,-0.94045 -7.7344,10.52732 -7.4993,14.09865 0.4944,7.49384 -4.7149,14.61007 -6.8993,21.59794 0.5058,-0.7678 1.1629,-1.73608 1.7998,-2.39975 1.0981,1.3452 2.7199,2.51886 4.4996,2.39975 -3.8928,1.13991 -8.3028,1.07697 -8.9992,5.99945 1.7737,-0.30948 3.4305,0.0307 4.7996,1.19988 -4.3035,-1.98209 -5.6594,6.11962 -9.2991,6.89936 0.7055,-1.47317 1.2194,-2.97283 1.7998,-4.49958 -0.289,0.51433 -1.36,2.46258 -2.0998,4.19962 -0.9513,2.23333 -1.3747,4.25619 0.8994,3.89962 2.6815,-0.41969 3.9566,-1.05119 6.5994,0.29996 0.1604,0.0815 0.4166,0.19315 0.5999,0.29997 0.8697,0.50617 1.9523,1.19458 2.9997,1.49987 0.5194,-0.12589 1.4274,0.31936 1.7999,0 -0.3763,0.16368 -0.7881,0.34662 -1.1999,0.29996 3.0295,3.11021 2.4204,6.05171 1.7998,8.39921 -0.621,2.3475 -1.3217,4.091 1.1999,5.3995 2.5216,1.3085 5.1278,-0.2432 8.0992,-2.3998 2.9714,-2.1566 6.495,-4.746 10.4991,-5.0995 8.0082,-0.7071 17.5494,6.3653 27.5974,5.9994 10.0479,-0.3658 14.9111,-7.1919 30.597,-9.29907 7.843,-1.05361 20.1041,-3.77898 32.097,-4.79957 5.7862,-0.49243 11.3081,-0.53657 16.4985,0.29999 0.048,-0.37868 0.261,-0.83522 0.2994,-1.19991 0.5044,-4.62142 0.3005,-8.09921 0.3005,-8.09921 l 34.1968,-59.69438 z m -8.6991,14.69864 c -4.3838,2.4582 -7.1019,6.99959 -3.8997,11.69887 2.631,-0.41669 3.1785,-3.76633 0,-3.59966 1.4791,-1.87195 0,-4.22926 2.0998,-5.69946 1.2679,-0.88982 3.6689,-0.20029 1.7999,-2.39975 z m -14.6986,15.29853 c 1.1968,-0.62576 1.5042,-0.37032 -0.8995,2.09979 -0.8773,0.49186 -1.6983,1.11039 -2.6997,1.49987 -2.5356,0.99105 -6.2994,3.05843 -6.2994,6.29941 -0.7756,0.0354 -1.6623,-0.25208 -2.3998,-0.89991 2.8184,-2.25589 5.7052,-4.56967 8.6992,-6.59938 0.4713,-0.32138 2.4028,-1.77405 3.5996,-2.39978 z" >
<animateTransform attributeName="transform" type = "translate" from="600" to="1000"
dur="10s" repeatCount="indefinite" />
</path>
</g>
</svg>