svg元素动画

发布时间 2023-05-04 09:16:39作者: newmiracle宇宙
    <section style="line-height: 0;font-size: 0px;transform: scale(1);"><svg
                style="pointer-events: none;display: inline-block;width: 100%;vertical-align: top;background-repeat: repeat;background-size: 100% 100%;background-image: url(22);-webkit-tap-highlight-color: transparent;user-select: none;"
                viewBox="0 0 701 1973">

                <g transform-origin="352 430" decs="yuananim">
                    <animateTransform attributeType="xml" attributeName="transform" type="scale" dur="2s"
                        repeatCount="indefinite" values="1; 1.25; 1">
                    </animateTransform>
                    <foreignObject x="337" y="425" width="31" height="31"><svg
                            style="width: 100%;vertical-align: top;background-repeat: no-repeat;vertical-align: top;background-size: 100% 100%;background-image: url(11);-webkit-tap-highlight-color: transparent;user-select: none;"
                            viewBox="0 0 31 31"></svg>
                    </foreignObject>
                </g>

                <g opacity="0">
                    <animateTransform attributeName="transform" type="translate" values="135135 0" begin="click"
                        dur="1000s" restart="never" fill="freeze">
                    </animateTransform>
                    <animate attributeName="opacity" begin="click+0s" restart="never" dur="1000s" keyTimes="0; 0.001; 1"
                        values="0;1;1" fill="freeze" calcMode="spline" keySplines="0.42 0 0.58 1.0;0.42 0 0.58 1.0">
                    </animate>
                    <rect x="0" y="0" width="701" height="1973" opacity="0" fill="transparent"
                        style="pointer-events: visible;" decs="clickarea">
                        <set attributeName="visibility" from="visible" to="hidden" begin="click"></set>
                    </rect>
                    <g transform="translate(-135135 0)">
                        <foreignObject x="0" y="0" width="100%" height="100%">
                            <svg style="pointer-events: none;display: inline-block;width: 100%;vertical-align: top;background-size: 100% 100%;background-repeat: no-repeat;background-image: url(22);-webkit-tap-highlight-color: transparent;user-select: none;"
                                viewBox="0 0 701 1973">
                            </svg>
                        </foreignObject>
                    </g>
                </g>
            </svg>


        </section>

svg元素动画