微信公众号文章答题卡效果

  一个微信公众号答题效果,可以记录选择的答案。效果如下图,使用了svg。

微信公众号文章答题卡效果

微信公众号文章答题卡效果

微信公众号文章答题卡效果

<!doctype html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<style>
    body {
        max-width: 677px;
        margin: 0 auto;
        padding: 0;
    }
</style>
<p style="margin-top:-1px;background-color:#01354a;text-align: center;"><img style="visibility: visible !important; width: 330px !important; height: auto !important;"  src="/imgblog/20201210/2212023704.jpg"></p>
<p style="width: 330px;margin:-954px auto 0;text-align: center;background-color: #01354a;user-select:none">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewbox="0 0 640 1778" enable-background="new 0 0 640 1778" xml:space="preserve">
        <g>
            <animate attributename="opacity" begin="click+.5s" dur=".7s" values="1;0;0;0;0;1" fill="freeze"></animate>
            <animatetransform attributename="transform" type="translate" values="0 0;-640 0" fill="freeze" begin="click+.5s" dur=".5s"></animatetransform>
            <g>
                <g>
                    <g><text transform="matrix(1 0 0 1 280 250)" fill="#FFFFFF" font-family="'SimHei'" font-size="28" letter-spacing="3">第一题</text></g>
                    <g>
                        <text transform="matrix(1 0 0 1 140 390)" fill="#FFFFFF" font-size="25" letter-spacing="3">沙迦得天独厚的地理位置和交通优</text>
                        <text transform="matrix(1 0 0 1 80 440)" fill="#FFFFFF" font-size="25" letter-spacing="3">势,使其从1965年起就成为了重要的</text>
                        <text transform="matrix(1 0 0 1 80 490)" fill="#FFFFFF" font-size="25" letter-spacing="3">国际交通枢纽,方便前往哪些地区?</text>
                    </g>
                    <g>
                        <text transform="matrix(1 0 0 1 82 630)" fill="#FFFFFF" font-size="25" letter-spacing="3">地中海和大西洋的主要国际机场和港口</text>
                    </g>
                    <g>
                        <text transform="matrix(1 0 0 1 82 735)" fill="#FFFFFF" font-size="25" letter-spacing="3">阿拉伯海湾和印度洋的主要国际机场和</text>
                        <text transform="matrix(1 0 0 1 82 765)" fill="#FFFFFF" font-size="25" letter-spacing="3">港口</text>
                    </g>
                    <g>
                        <text transform="matrix(1 0 0 1 82 865)" fill="#FFFFFF" font-size="25" letter-spacing="3">孟加拉湾和印度洋的主要国际机场和港</text>
                        <text transform="matrix(1 0 0 1 82 895)" fill="#FFFFFF" font-size="25" letter-spacing="3">口</text>
                    </g>
                </g>
                <g opacity="0">
                    <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                    <g>
                        <circle fill="#D52B1E" cx="784" cy="1405" r="14"></circle>
                        <g><text transform="matrix(1 0 0 1 777 1413)" fill="#FFFFFF" letter-spacing="3" font-size="22">A</text></g>
                    </g>
                    <g>
                        <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 75 577)"></path>
                        <g><text transform="matrix(1 0 0 1 82 630)" fill="#000000" font-size="25" letter-spacing="3">地中海和大西洋的主要国际机场和港口</text></g>
                    </g>
                </g>
                <g opacity="0">
                    <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                    <g>
                        <circle fill="#D52B1E" cx="824" cy="1405" r="14"></circle>
                        <g><text transform="matrix(1 0 0 1 817 1413)" fill="#FFFFFF" letter-spacing="3" font-size="22">B</text></g>
                    </g>
                    <g>
                        <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 75 704)"></path>
                        <g>
                            <text transform="matrix(1 0 0 1 82 735)" fill="#000000" font-size="25" letter-spacing="3">阿拉伯海湾和印度洋的主要国际机场和</text>
                            <text transform="matrix(1 0 0 1 82 765)" fill="#000000" font-size="25" letter-spacing="3">港口</text>
                        </g>
                    </g>
                </g>
                <g opacity="0">
                    <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                    <g>
                        <circle fill="#D52B1E" cx="864" cy="1405" r="14"></circle>
                        <g><text transform="matrix(1 0 0 1 857 1413)" fill="#FFFFFF" letter-spacing="3" font-size="22">C</text></g>
                    </g>
                    <g>
                        <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 75 831)"></path>
                        <g>
                            <text transform="matrix(1 0 0 1 82 865)" fill="#000000" font-size="25" letter-spacing="3">孟加拉湾和印度洋的主要国际机场和港</text>
                            <text transform="matrix(1 0 0 1 82 895)" fill="#000000" font-size="25" letter-spacing="3">口</text>
                        </g>
                    </g>
                </g>
            </g>
            <g>
                <animate attributename="opacity" begin="click+.5s" dur=".7s" values="1;0;0;0;0;1" fill="freeze"></animate>
                <animatetransform attributename="transform" type="translate" values="0 0;-640 0" fill="freeze" begin="click+.5s" dur=".5s"></animatetransform>
                <g>
                    <g>
                        <g><text transform="matrix(1 0 0 1 920 250)" fill="#FFFFFF" font-family="'SimHei'" font-size="28" letter-spacing="3">第二题</text></g>
                        <g><text transform="matrix(1 0 0 1 785 440)" fill="#FFFFFF" font-size="25" letter-spacing="3">常年蓝天白云的沙迦属于什么气候?</text></g>
                        <g><text transform="matrix(1 0 0 1 725 630)" fill="#FFFFFF" font-size="25" letter-spacing="3">热带雨林气候</text></g>
                        <g><text transform="matrix(1 0 0 1 725 755)" fill="#FFFFFF" font-size="25" letter-spacing="3">热带季风气候</text></g>
                        <g><text transform="matrix(1 0 0 1 725 880)" fill="#FFFFFF" font-size="25" letter-spacing="3">热带沙漠气候</text></g>
                    </g>
                    <g opacity="0">
                        <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                        <g>
                            <circle fill="#D52B1E" cx="1424" cy="1437" r="14"></circle>
                            <g><text transform="matrix(1 0 0 1 1417 1445)" fill="#FFFFFF" letter-spacing="3" font-size="22">A</text></g>
                        </g>
                        <g>
                            <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 715 577)"></path>
                            <g><text transform="matrix(1 0 0 1 725 630)" fill="#000000" font-size="25" letter-spacing="3">热带雨林气候</text></g>
                        </g>
                    </g>
                    <g opacity="0">
                        <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                        <g>
                            <circle fill="#D52B1E" cx="1464" cy="1437" r="14"></circle>
                            <g><text transform="matrix(1 0 0 1 1457 1445)" fill="#FFFFFF" letter-spacing="3" font-size="22">B</text></g>
                        </g>
                        <g>
                            <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 715 704)"></path>
                            <g><text transform="matrix(1 0 0 1 725 755)" fill="#000000" font-size="25" letter-spacing="3">热带季风气候</text></g>
                        </g>
                    </g>
                    <g opacity="0">
                        <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                        <g>
                            <circle fill="#D52B1E" cx="1504" cy="1437" r="14"></circle>
                            <g><text transform="matrix(1 0 0 1 1497 1445)" fill="#ffffff" letter-spacing="3" font-size="22">C</text></g>
                        </g>
                        <g>
                            <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 715 831)"></path>
                            <g><text transform="matrix(1 0 0 1 725 880)" fill="#000000" font-size="25" letter-spacing="3">热带沙漠气候</text></g>
                        </g>
                    </g>
                </g>
                <g>
                    <animate attributename="opacity" begin="click+.5s" dur=".7s" values="1;0;0;0;0;1" fill="freeze"></animate>
                    <animatetransform attributename="transform" type="translate" values="0 0;-640 0" fill="freeze" begin="click+.5s" dur=".5s"></animatetransform>
                    <g>
                        <g>
                            <g><text transform="matrix(1 0 0 1 1560 250)" fill="#FFFFFF" font-family="'SimHei'" font-size="28" letter-spacing="3">第三题</text></g>
                            <g>
                                <text transform="matrix(1 0 0 1 1420 390)" fill="#FFFFFF" font-size="25" letter-spacing="3">现在,中国已经成为阿联酋的第几</text>
                                <text transform="matrix(1 0 0 1 1360 440)" fill="#FFFFFF" font-size="25" letter-spacing="3">大贸易伙伴?</text>
                            </g>
                            <g><text transform="matrix(1 0 0 1 1365 630)" fill="#FFFFFF" font-size="25" letter-spacing="3">第一大贸易伙伴</text></g>
                            <g><text transform="matrix(1 0 0 1 1365 755)" fill="#FFFFFF" font-size="25" letter-spacing="3">第二大贸易伙伴</text></g>
                            <g><text transform="matrix(1 0 0 1 1365 880)" fill="#FFFFFF" font-size="25" letter-spacing="3">第三大贸易伙伴</text></g>
                        </g>
                        <g opacity="0">
                            <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                            <g>
                                <circle fill="#D52B1E" cx="2064" cy="1469" r="14"></circle>
                                <g><text transform="matrix(1 0 0 1 2057 1477)" fill="#FFFFFF" letter-spacing="3" font-size="22">A</text></g>
                            </g>
                            <g>
                                <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 1355 577)"></path>
                                <g><text transform="matrix(1 0 0 1 1365 630)" fill="#000000" font-size="25" letter-spacing="3">第一大贸易伙伴</text></g>
                            </g>
                        </g>
                        <g opacity="0">
                            <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                            <g>
                                <circle fill="#D52B1E" cx="2104" cy="1469" r="14"></circle>
                                <g><text transform="matrix(1 0 0 1 2097 1477)" fill="#FFFFFF" letter-spacing="3" font-size="22">B</text></g>
                            </g>
                            <g>
                                <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 1355 704)"></path>
                                <g><text transform="matrix(1 0 0 1 1365 755)" fill="#000000" font-size="25" letter-spacing="3">第二大贸易伙伴</text></g>
                            </g>
                        </g>
                        <g opacity="0">
                            <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                            <g>
                                <circle fill="#D52B1E" cx="2144" cy="1469" r="14"></circle>
                                <g><text transform="matrix(1 0 0 1 2137 1477)" fill="#FFFFFF" letter-spacing="3" font-size="22">C</text></g>
                            </g>
                            <g>
                                <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 1355 831)"></path>
                                <g><text transform="matrix(1 0 0 1 1365 880)" fill="#000000" font-size="25" letter-spacing="3">第三大贸易伙伴</text></g>
                            </g>
                        </g>
                    </g>
                    <g>
                        <animate attributename="opacity" begin="click+.5s" dur=".7s" values="1;0;0;0;0;1" fill="freeze"></animate>
                        <animatetransform attributename="transform" type="translate" values="0 0;-640 0" fill="freeze" begin="click+.5s" dur=".5s"></animatetransform>
                        <g>
                            <g>
                                <g><text transform="matrix(1 0 0 1 2200 250)" fill="#FFFFFF" font-family="'SimHei'" font-size="28" letter-spacing="3">第四题</text></g>
                                <g>
                                    <text transform="matrix(1 0 0 1 2065 390)" fill="#FFFFFF" font-size="25" letter-spacing="3">关于蕴藏着机遇的沙迦重点发展</text>
                                    <text transform="matrix(1 0 0 1 2000 440)" fill="#FFFFFF" font-size="25" letter-spacing="3">行业,以下选项错误的是?</text>
                                </g>
                                <g><text transform="matrix(1 0 0 1 2005 625)" fill="#FFFFFF" font-size="25" letter-spacing="3">旅游与休闲</text></g>
                                <g><text transform="matrix(1 0 0 1 2005 753)" fill="#FFFFFF" font-size="25" letter-spacing="3">教育与轻工制造</text></g>
                                <g><text transform="matrix(1 0 0 1 2005 882)" fill="#FFFFFF" font-size="25" letter-spacing="3">农业与采矿业</text></g>
                            </g>
                            <g opacity="0">
                                <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                <g>
                                    <circle fill="#D52B1E" cx="2704" cy="1501" r="14"></circle>
                                    <g><text transform="matrix(1 0 0 1 2697 1509)" fill="#FFFFFF" letter-spacing="3" font-size="22">A</text></g>
                                </g>
                                <g>
                                    <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 1995 577)"></path>
                                    <g><text transform="matrix(1 0 0 1 2005 625)" fill="#000000" font-size="25" letter-spacing="3">旅游与休闲</text></g>
                                </g>
                            </g>
                            <g opacity="0">
                                <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                <g>
                                    <circle fill="#D52B1E" cx="2744" cy="1501" r="14"></circle>
                                    <g><text transform="matrix(1 0 0 1 2737 1509)" fill="#FFFFFF" letter-spacing="3" font-size="22">B</text></g>
                                </g>
                                <g>
                                    <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 1995 704)"></path>
                                    <g><text transform="matrix(1 0 0 1 2005 753)" fill="#000000" font-size="25" letter-spacing="3">教育与轻工制造</text></g>
                                </g>
                            </g>
                            <g opacity="0">
                                <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                <g>
                                    <circle fill="#D52B1E" cx="2784" cy="1501" r="14"></circle>
                                    <g><text transform="matrix(1 0 0 1 2777 1509)" fill="#FFFFFF" letter-spacing="3" font-size="22">C</text></g>
                                </g>
                                <g>
                                    <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 1995 831)"></path>
                                    <g><text transform="matrix(1 0 0 1 2005 882)" fill="#000000" font-size="25" letter-spacing="3">农业与采矿业</text></g>
                                </g>
                            </g>
                        </g>
                        <g>
                            <animate attributename="opacity" begin="click+.5s" dur=".7s" values="1;0;0;0;0;1" fill="freeze"></animate>
                            <animatetransform attributename="transform" type="translate" values="0 0;-640 0" fill="freeze" begin="click+.5s" dur=".5s"></animatetransform>
                            <g>
                                <g>
                                    <g><text transform="matrix(1 0 0 1 2840 250)" fill="#FFFFFF" font-family="'SimHei'" font-size="28" letter-spacing="3">第五题</text></g>
                                    <g><text transform="matrix(1 0 0 1 2700 440)" fill="#FFFFFF" font-size="25" letter-spacing="3">沙迦拥有多少个自由贸易区?</text></g>
                                    <g><text transform="matrix(1 0 0 1 2645 630)" fill="#FFFFFF" font-size="25" letter-spacing="3">5个</text></g>
                                    <g><text transform="matrix(1 0 0 1 2645 753)" fill="#FFFFFF" font-size="25" letter-spacing="3">6个</text></g>
                                    <g><text transform="matrix(1 0 0 1 2645 882)" fill="#FFFFFF" font-size="25" letter-spacing="3">7个</text></g>
                                </g>
                                <g opacity="0">
                                    <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                    <g>
                                        <circle fill="#D52B1E" cx="3344" cy="1533" r="14"></circle>
                                        <g><text transform="matrix(1 0 0 1 3337 1541)" fill="#FFFFFF" letter-spacing="3" font-size="22">A</text></g>
                                    </g>
                                    <g>
                                        <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 2635 577)"></path>
                                        <g><text transform="matrix(1 0 0 1 2645 630)" fill="#000000" font-size="25" letter-spacing="3">5个</text></g>
                                    </g>
                                </g>
                                <g opacity="0">
                                    <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                    <g>
                                        <circle fill="#D52B1E" cx="3384" cy="1533" r="14"></circle>
                                        <g><text transform="matrix(1 0 0 1 3377 1541)" fill="#FFFFFF" letter-spacing="3" font-size="22">B</text></g>
                                    </g>
                                    <g>
                                        <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 2635 704)"></path>
                                        <g><text transform="matrix(1 0 0 1 2645 753)" fill="#000000" font-size="25" letter-spacing="3">6个</text></g>
                                    </g>
                                </g>
                                <g opacity="0">
                                    <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                    <g>
                                        <circle fill="#D52B1E" cx="3424" cy="1533" r="14"></circle>
                                        <g><text transform="matrix(1 0 0 1 3417 1541)" fill="#FFFFFF" letter-spacing="3" font-size="22">C</text></g>
                                    </g>
                                    <g>
                                        <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 2635 831)"></path>
                                        <g><text transform="matrix(1 0 0 1 2645 882)" fill="#000000" font-size="25" letter-spacing="3">7个</text></g>
                                    </g>
                                </g>
                            </g>
                            <g>
                                <animate attributename="opacity" begin="click+.5s" dur=".7s" values="1;0;0;0;0;1" fill="freeze"></animate>
                                <animatetransform attributename="transform" type="translate" values="0 0;-640 0" fill="freeze" begin="click+.5s" dur=".5s"></animatetransform>
                                <g>
                                    <g>
                                        <g><text transform="matrix(1 0 0 1 3480 250)" fill="#FFFFFF" font-family="'SimHei'" font-size="28" letter-spacing="3">第六题</text></g>
                                        <g>
                                            <text transform="matrix(1 0 0 1 3340 390)" fill="#FFFFFF" font-size="25" letter-spacing="3">位于沙迦的哪一个自由区是阿联酋</text>
                                            <text transform="matrix(1 0 0 1 3280 440)" fill="#FFFFFF" font-size="25" letter-spacing="3">的第二大工业自由区?</text>
                                        </g>
                                        <g><text transform="matrix(1 0 0 1 3285 630)" fill="#FFFFFF" font-size="25" letter-spacing="3">哈姆利亚自由区(HFZA)</text></g>
                                        <g><text transform="matrix(1 0 0 1 3285 753)" fill="#FFFFFF" font-size="25" letter-spacing="3">沙迦机场国际自由区(SAIF)</text></g>
                                        <g><text transform="matrix(1 0 0 1 3285 882)" fill="#FFFFFF" font-size="25" letter-spacing="3">沙迦媒体城自贸区(SHAMS)</text></g>
                                    </g>
                                    <g opacity="0">
                                        <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                        <g>
                                            <circle fill="#D52B1E" cx="3984" cy="1565" r="14"></circle>
                                            <g><text transform="matrix(1 0 0 1 3977 1573)" fill="#FFFFFF" letter-spacing="3" font-size="22">A</text></g>
                                        </g>
                                        <g>
                                            <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 3275 577)"></path>
                                            <g><text transform="matrix(1 0 0 1 3285 630)" fill="#000000" font-size="25" letter-spacing="3">哈姆利亚自由区(HFZA)</text></g>
                                        </g>
                                    </g>
                                    <g opacity="0">
                                        <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                        <g>
                                            <circle fill="#D52B1E" cx="4024" cy="1565" r="14"></circle>
                                            <g><text transform="matrix(1 0 0 1 4017 1573)" fill="#FFFFFF" letter-spacing="3" font-size="22">B</text></g>
                                        </g>
                                        <g>
                                            <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 3275 704)"></path>
                                            <g><text transform="matrix(1 0 0 1 3285 753)" fill="#000000" font-size="25" letter-spacing="3">沙迦机场国际自由区(SAIF)</text></g>
                                        </g>
                                    </g>
                                    <g opacity="0">
                                        <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                        <g>
                                            <circle fill="#D52B1E" cx="4064" cy="1565" r="14"></circle>
                                            <g><text transform="matrix(1 0 0 1 4057 1573)" fill="#FFFFFF" letter-spacing="3" font-size="22">C</text></g>
                                        </g>
                                        <g>
                                            <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 3275 831)"></path>
                                            <g><text transform="matrix(1 0 0 1 3285 882)" fill="#000000" font-size="25" letter-spacing="3">沙迦媒体城自贸区(SHAMS)</text></g>
                                        </g>
                                    </g>
                                </g>
                                <g>
                                    <animate attributename="opacity" begin="click+.5s" dur=".7s" values="1;0;0;0;0;1" fill="freeze"></animate>
                                    <animatetransform attributename="transform" type="translate" values="0 0;-640 0" fill="freeze" begin="click+.5s" dur=".5s"></animatetransform>
                                    <g>
                                        <g>
                                            <g><text transform="matrix(1 0 0 1 4120 250)" fill="#FFFFFF" font-family="'SimHei'" font-size="28" letter-spacing="3">第七题</text></g>
                                            <g>
                                                <text transform="matrix(1 0 0 1 3975 390)" fill="#FFFFFF" font-size="25" letter-spacing="3">全球首个以出版业为主题的自由</text>
                                                <text transform="matrix(1 0 0 1 3920 440)" fill="#FFFFFF" font-size="25" letter-spacing="3">区是沙迦的哪个自由区?</text>
                                            </g>
                                            <g><text transform="matrix(1 0 0 1 3925 630)" fill="#FFFFFF" font-size="25" letter-spacing="3">沙迦媒体城自贸区(SHAMS)</text></g>
                                            <g><text transform="matrix(1 0 0 1 3925 753)" fill="#FFFFFF" font-size="25" letter-spacing="3">沙迦出版城自贸区(SPC-FZ)</text></g>
                                            <g><text transform="matrix(1 0 0 1 3925 882)" fill="#FFFFFF" font-size="25" letter-spacing="3">沙迦科技创新产业园(SRTIP)</text></g>
                                        </g>
                                        <g opacity="0">
                                            <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                            <g>
                                                <circle fill="#D52B1E" cx="4624" cy="1597" r="14"></circle>
                                                <g><text transform="matrix(1 0 0 1 4617 1605)" fill="#FFFFFF" letter-spacing="3" font-size="22">A</text></g>
                                            </g>
                                            <g>
                                                <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 3915 577)"></path>
                                                <g><text transform="matrix(1 0 0 1 3925 630)" fill="#000000" font-size="25" letter-spacing="3">沙迦媒体城自贸区(SHAMS)</text></g>
                                            </g>
                                        </g>
                                        <g opacity="0">
                                            <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                            <g>
                                                <circle fill="#D52B1E" cx="4664" cy="1597" r="14"></circle>
                                                <g><text transform="matrix(1 0 0 1 4657 1605)" fill="#FFFFFF" letter-spacing="3" font-size="22">B</text></g>
                                            </g>
                                            <g>
                                                <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 3915 704)"></path>
                                                <g><text transform="matrix(1 0 0 1 3925 753)" fill="#000000" font-size="25" letter-spacing="3">沙迦出版城自贸区(SPC-FZ)</text></g>
                                            </g>
                                        </g>
                                        <g opacity="0">
                                            <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                            <g>
                                                <circle fill="#D52B1E" cx="4704" cy="1597" r="14"></circle>
                                                <g><text transform="matrix(1 0 0 1 4697 1605)" fill="#FFFFFF" letter-spacing="3" font-size="22">C</text></g>
                                            </g>
                                            <g>
                                                <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 3915 831)"></path>
                                                <g><text transform="matrix(1 0 0 1 3925 882)" fill="#000000" font-size="25" letter-spacing="3">沙迦科技创新产业园(SRTIP)</text></g>
                                            </g>
                                        </g>
                                    </g>
                                    <g>
                                        <animate attributename="opacity" begin="click+.5s" dur=".7s" values="1;0;0;0;0;1" fill="freeze"></animate>
                                        <animatetransform attributename="transform" type="translate" values="0 0;-640 0" fill="freeze" begin="click+.5s" dur=".5s"></animatetransform>
                                        <g>
                                            <g>
                                                <g><text transform="matrix(1 0 0 1 4760 250)" fill="#FFFFFF" font-family="'SimHei'" font-size="28" letter-spacing="3">第八题</text></g>
                                                <g>
                                                    <text transform="matrix(1 0 0 1 4615 390)" fill="#FFFFFF" font-size="25" letter-spacing="3">沙迦国际机场被视为中东领先的</text>
                                                    <text transform="matrix(1 0 0 1 4560 440)" fill="#FFFFFF" font-size="25" letter-spacing="3">航空运输门户和第几大货运枢纽?</text>
                                                </g>
                                                <g><text transform="matrix(1 0 0 1 4565 630)" fill="#FFFFFF" font-size="25" letter-spacing="3">第一大货运枢纽</text></g>
                                                <g><text transform="matrix(1 0 0 1 4565 753)" fill="#FFFFFF" font-size="25" letter-spacing="3">第二大货运枢纽</text></g>
                                                <g><text transform="matrix(1 0 0 1 4565 882)" fill="#FFFFFF" font-size="25" letter-spacing="3">第三大货运枢纽</text></g>
                                            </g>
                                            <g opacity="0">
                                                <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                                <g>
                                                    <circle fill="#D52B1E" cx="5264" cy="1629" r="14"></circle>
                                                    <g><text transform="matrix(1 0 0 1 5257 1637)" fill="#FFFFFF" letter-spacing="3" font-size="22">A</text></g>
                                                </g>
                                                <g>
                                                    <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 4555 577)"></path>
                                                    <g><text transform="matrix(1 0 0 1 4565 630)" fill="#000000" font-size="25" letter-spacing="3">第一大货运枢纽</text></g>
                                                </g>
                                            </g>
                                            <g opacity="0">
                                                <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                                <g>
                                                    <circle fill="#D52B1E" cx="5304" cy="1629" r="14"></circle>
                                                    <g><text transform="matrix(1 0 0 1 5297 1637)" fill="#FFFFFF" letter-spacing="3" font-size="22">B</text></g>
                                                </g>
                                                <g>
                                                    <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 4555 704)"></path>
                                                    <g><text transform="matrix(1 0 0 1 4565 753)" fill="#000000" font-size="25" letter-spacing="3">第二大货运枢纽</text></g>
                                                </g>
                                            </g>
                                            <g opacity="0">
                                                <animate attributename="opacity" begin="click" dur=".3s" values="0;1" fill="freeze"></animate>
                                                <g>
                                                    <circle fill="#D52B1E" cx="5344" cy="1629" r="14"></circle>
                                                    <g><text transform="matrix(1 0 0 1 5337 1637)" fill="#FFFFFF" letter-spacing="3" font-size="22">C</text></g>
                                                </g>
                                                <g>
                                                    <path fill="#FFFFFF" d="M591.5,96.5h-569c-12.1,0-22-9.9-22-22v-52c0-12.1,9.9-22,22-22h569c12.1,0,22,9.9,22,22v52  C613.5,86.6,603.6,96.5,591.5,96.5z" transform="matrix(0.8 0 0 0.8 4555 831)"></path>
                                                    <g><text transform="matrix(1 0 0 1 4565 882)" fill="#000000" font-size="25" letter-spacing="3">第三大货运枢纽</text></g>
                                                </g>
                                            </g>
                                        </g>
                                        <g>
                                            <rect x="5110" y="380" fill="#01354a" width="640" height="720"></rect>
                                            <g>
                                                <text transform="matrix(1 0 0 1 5420 250)" fill="#FFFFFF" font-family="'SimHei'" font-size="28" letter-spacing="3">完</text>
                                                <text transform="matrix(1 0 0 1 5350 350)" fill="#FFFFFF" font-size="36" letter-spacing="3">答题结束</text>
                                            </g>
                                            <g>
                                                <text transform="matrix(1 0 0 1 5400  500)" fill="#FFFFFF" font-size="60" letter-spacing="3">下</text>
                                                <text transform="matrix(1 0 0 1 5400  580)" fill="#FFFFFF" font-size="60" letter-spacing="3">划</text>
                                                <text transform="matrix(1 0 0 1 5400  660)" fill="#FFFFFF" font-size="60" letter-spacing="3">查</text>
                                                <text transform="matrix(1 0 0 1 5400  740)" fill="#FFFFFF" font-size="60" letter-spacing="3">看</text>
                                                <text transform="matrix(1 0 0 1 5400  820)" fill="#FFFFFF" font-size="60" letter-spacing="3">答</text>
                                                <text transform="matrix(1 0 0 1 5400  900)" fill="#FFFFFF" font-size="60" letter-spacing="3">题</text>
                                                <text transform="matrix(1 0 0 1 5400  980)" fill="#FFFFFF" font-size="60" letter-spacing="3">卡</text>
                                                <text transform="matrix(1 0 0 1 5410  1050)" fill="#FFFFFF" font-size="40" letter-spacing="3">👇</text>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
    </g>
    <g>
        <animate attributename="opacity" begin="click" dur=".3s" values="1;0" fill="freeze"></animate>
        <rect x="25" y="1215" fill="#FFFFFF" width="570" height="450"></rect>
        <g>
            <text transform="matrix(1 0 0 1 120 1470)" fill="#777777" font-size="42" letter-spacing="3">点 击 查 看 答 题 卡</text>
        </g>
    </g>
   </svg>
</p>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:微信公众号文章答题卡效果

评论(0)Web开发网
阅读(28)喜欢(0)JavaScript/Ajax开发技巧