vue.runtime.esm.js:1887 TypeError: Cannot set property className of #<SVGElement> which has only a getter
vue.runtime.esm.js:620 [Vue warn]: Error in callback for watcher "focusing": "TypeError: selfDefine.className.replace is not a function"
vue.runtime.esm.js:1887 TypeError: selfDefine.className.replace is not a function

要吐血了！！！ 因为这个图标坑，导致我本来的功能出现大问题，刚开始还一直在排查功能问题，最后才发现是 自定义图标惹的祸！！！

问题描述

如图，点击下拉框按钮/鼠标悬浮 出现分配菜单项 ，这里 我使用了 Element 的 Dropdown 下拉菜单组件
但是 下拉图标 因为设计要求，使用的是自定义的svg图标，当时功能都是好的，也没有任何报错，测试后就上线了，就这么一直持续到今天！！反馈说是 点击分配菜单 ，弹筐里的数据项无法勾选，勾选数据也没有正常回显，

排查

第一反应就是 自己勾选，回显的逻辑写的有问题，就往这方面排查，但这块逻辑功能最近也没有修改过呢，排查控制台的报错，发现和svg className相关，于是就给dropdown 用到的自定义svg图标先注释掉，恢复成自带的icon，发现 没有报错了，弹框里 数据也正常回显，可以操作了！

修改前 代码

 <el-dropdown>
    <svg-icon icon-class="userSel" class-name="btnItem" />
    <el-dropdown-menu slot="dropdown">
        <span @click="setMenu(scope.$index, scope.row)">
            <el-dropdown-item icon="el-icon-setting">分配菜单</el-dropdown-item>
        </span>
    </el-dropdown-menu>
</el-dropdown>

修改后代码

 <el-dropdown>
    <i class="el-icon-caret-bottom" style="color:#fff;"></i>
    <el-dropdown-menu slot="dropdown">
        <span @click="setMenu(scope.$index, scope.row)">
            <el-dropdown-item icon="el-icon-setting">分配菜单</el-dropdown-item>
        </span>
    </el-dropdown-menu>
</el-dropdown>

结论

其实我也蛮奇怪的，那为何最初使用自定义svg 就没有报错，也可以正常使用呢，而用了一段时间后，现在开始出现这个报错了呢,所以记录一下哈~ 也是提醒和我遇到同样问题的小伙伴们，可以往这方面排查哈，节省大家解决bug的时间

修改后 正常显示