给SVG加上事件

作者: 萍璠as田丹丹 | 来源:发表于2019-05-07 15:11 被阅读0次

给SVG加上事件
canvas与svg的区别
SVG绘制图形
Fvwm配置过程中比较有意思的几个事儿
常见面试题---网络相关及HTML篇（二）
element ui的el-input如何监听回车键
vue使用svg
第八章 d3拖拽和事件及缩放
使用SVG实现圆环loading动画
vue中@click事件无效

2018年年底，当大家都沉浸在过年的喜气中时，我让一个小活儿给愁到了。
需求是这样的：
某区一共有若干街道，每个街道有若干社区，每个社区有N个楼宇。以社区为单位，

点击每个楼时，显示当前楼的逃生路线。备注，需要动画。

静态展示全部楼宇的逃生路线。

由于每个社区的楼宇分布情况非常复杂，还要适应屏幕的宽度，当时首先想到的就是svg。在这个小项目之前，我对svg技术理解只停留在“矢量”这个层面上。查资料充电继续学习，发现svg的每一个图形元素都可以当成一个html节点来处理，就是说，<g> <path> <line> <ellipse> <circle>等等这些都可以单独加事件。下面一个例子说明。
打开AI，当然我的头脑直接代码写复杂的图形肯定是不可能的，借助AI就容易的多了（不要忘了我是个UI）。

image.png
用AI先绘制了一个这样的矢量图，并且给背景起了个名字“bg”，整个组命名为“m”。id=‘bg’的背景，不透明度设置为50%。

图层的名字将成为每个图形元素的id。

image.png

接下来，给图片添加事件：

鼠标放上去，id=‘bg’的背景，“不透明度”变为100%

鼠标移开，id=‘bg’的背景，“不透明度”变回50%

点击图片，弹出信息“提醒：该吃药了！”

打开AI的 “窗口” > “SVG交互”，选择哪个图形，就给哪个图形添加事件，图中只是一个例子，我把事件都加在了id=‘m’的组上：

image.png

在“存储为” SVG格式时，就可以查看SVG源码了。

image.png

最后献上代码段：

<svg version="1.1" id="test_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<g id="m"
   onclick="alert('提醒：该吃药了！')"
   onmouseover="document.getElementById('bg').style.opacity='1'"
   onmouseout="document.getElementById('bg').style.opacity='0.5'">
    <g id="bg" opacity="0.5">
        <circle id="_x32_" opacity="0.3" fill="#B59BC8" cx="243.081" cy="149.346" r="73"/>
        <circle id="_x31_" opacity="0.3" fill="#B59BC8" cx="332.081" cy="149.346" r="73"/>
    </g>
    <g>
        <g>
            <g>
                <path fill="#FFFFFF" stroke="#4E469A" stroke-width="2" stroke-miterlimit="10" d="M253.815,127.921
                    c-7.194-7.194-18.857-7.193-26.051,0c-7.194,7.194-7.194,18.857,0,26.051l21.424,21.424l26.051-26.051L253.815,127.921z"/>
                <path fill="#FFFFFF" stroke="#4E469A" stroke-width="2" stroke-miterlimit="10" d="M275.24,149.346"/>
                <path fill="#FFFFFF" stroke="#4E469A" stroke-width="2" stroke-miterlimit="10" d="M249.189,175.397"/>

                <line fill="#FFFFFF" stroke="#4E469A" stroke-width="2" stroke-miterlimit="10" x1="275.24" y1="149.346" x2="249.189" y2="175.397"/>
            </g>

            <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -38.0124 232.9738)" fill="#E4DAEB" stroke="#4E469A" stroke-width="2" stroke-miterlimit="10" cx="262.214" cy="162.371" rx="18.421" ry="8"/>
            <path fill="#E7E4F2" d="M263.428,144.776c0.683,0.684,0.683,1.792,0,2.475l0,0c-0.684,0.683-1.792,0.683-2.475,0l-8.132-8.132
                c-0.683-0.683-0.683-1.792,0-2.475l0,0c0.684-0.683,1.792-0.683,2.475,0L263.428,144.776z"/>
            <path fill="#E7E4F2" d="M250.877,132.048c0.732,0.732,0.732,1.919,0,2.652l0,0c-0.732,0.732-1.919,0.732-2.652,0l0,0
                c-0.732-0.732-0.732-1.919,0-2.652l0,0C248.958,131.316,250.145,131.316,250.877,132.048L250.877,132.048z"/>
        </g>
        <g>
            <g>
                <path fill="#FFFFFF" stroke="#4E469A" stroke-width="2" stroke-miterlimit="10" d="M336.326,153.973
                    c7.193-7.194,7.193-18.857,0-26.051c-7.193-7.194-18.857-7.194-26.051,0l-21.425,21.424l26.052,26.051L336.326,153.973z"/>
                <path fill="#FFFFFF" stroke="#4E469A" stroke-width="2" stroke-miterlimit="10" d="M314.902,175.397"/>
                <path fill="#FFFFFF" stroke="#4E469A" stroke-width="2" stroke-miterlimit="10" d="M288.851,149.346"/>

                <line fill="#FFFFFF" stroke="#4E469A" stroke-width="2" stroke-miterlimit="10" x1="314.902" y1="175.397" x2="288.851" y2="149.346"/>
            </g>

            <ellipse transform="matrix(0.7071 0.7071 -0.7071 0.7071 203.2255 -165.8995)" fill="#E4DAEB" stroke="#4E469A" stroke-width="2" stroke-miterlimit="10" cx="301.876" cy="162.372" rx="18.421" ry="8"/>
        </g>
        <g>
            <circle fill="#402A8C" cx="266.721" cy="178.414" r="1.838"/>
            <circle fill="#402A8C" cx="270.397" cy="185.251" r="1.838"/>
            <circle fill="#402A8C" cx="280.753" cy="168.251" r="1.838"/>
            <circle fill="#402A8C" cx="281.633" cy="192.603" r="1.838"/>
            <circle fill="#402A8C" cx="275.24" cy="190.765" r="1.838"/>
            <circle fill="#402A8C" cx="285.309" cy="174.739" r="1.838"/>
            <circle fill="#402A8C" cx="287.672" cy="183.414" r="1.838"/>
            <circle fill="#402A8C" cx="292.526" cy="178.414" r="1.838"/>
            <circle fill="#402A8C" cx="285.834" cy="197.677" r="1.838"/>
            <circle fill="#402A8C" cx="279.796" cy="201.501" r="1.838"/>
            <circle fill="#402A8C" cx="281.634" cy="211.927" r="1.838"/>
            <circle fill="#402A8C" cx="274.581" cy="208.251" r="1.838"/>
            <circle fill="#402A8C" cx="280.752" cy="185.252" r="1.838"/>
            <circle fill="#402A8C" cx="277.077" cy="178.414" r="1.838"/>
        </g>
    </g>
</g>
</svg>

当然，这只是个例子。在项目中，我没有在AI软件里直接写JavaScript脚本，只是把图形描出来，事件还是在专业的前端编辑器里编写比较方便（有提示，哈哈哈）。

脑洞大开，UI和前端配合，能做出多么炫酷的页面。
最后，恭喜我的小项目如期上线。感谢某开发工程师给编写了自动化，如果没有他，天知道要给多少个楼宇手动加事件。
也恭祝UI设计者的设计稿一次过！前端代码0修改！
O(∩_∩)O哈哈~