Javascript 有没有办法使SVG类名向后兼容？

许多旧库依赖类名来识别它们的上下文

因此，单击处理程序可以如下所示：

function click(event)
{
   if (event.target.className.indexOf('something')!= -1){
       // Do something
   }
}

但是，如果目标元素是svg元素，这将失败。 原因是svg className是类型为的对象

是否有任何临时解决方法来避免旧代码的问题？ 更改处理程序不是一个选项，因为不清楚有多少库具有此代码，并且更改库代码可能是不可能的

将SVG更改为其他元素不是一个选项，因为SVG是第三方控件的一部分

更新：

“是否有任何临时解决方法来避免旧代码出现问题？” 从评论来看似乎不清楚。我的目标是看看是否有任何polyfill或任何其他技术可以用来临时使SVG元素的类名成为字符串，直到第三方库赶上。然后我将更新第三方库并还原此代码

到目前为止，简单地覆盖类名似乎是不可能的，因为它似乎只有getter而没有SVG元素的setter

函数oldModuleHandler（e）{
if（e.className.indexOf（“首字母”）>-1 | | e.className.indexOf（“固定”）>-1）{
警报（“行为符合预期”）；
}
}
函数fix（e）{
e、 className=“固定”；
}

演示：
单击左边的方块，它是一个div，它的颜色将变为绿色，因为.className.indexOf将很好地通过。同样的情况不适用于SVG。



.固定{
背景：绿色！重要；
宽度：80px；
高度：80px；
浮动：左；
}
.首字母{
背景：透明；
边框：1px纯黑；
宽度：80px；
高度：80px；
浮动：左；
}

您可以使用

getAttribute

和

setAttribute

或'

classList

方法：

函数oldModuleHandler（e）{
var c=e.getAttribute（'class'）；
如果（~c.indexOf（“首字母”）| | ~c.indexOf（“固定”））{
警报（“行为符合预期”）；
}
}
函数fix（e）{
e、 className=“固定”；
e、 setAttribute（'class'，'fixed'）
//或
e、 classList.add（'fixed'）
}

。已修复{
背景：绿色！重要；
宽度：80px；
高度：80px；
浮动：左；
}
.首字母{
背景：透明；
边框：1px纯黑；
宽度：80px；
高度：80px；
浮动：左；
}

演示：
单击左边的方块，它是一个div，它的颜色将变为绿色，因为.className.indexOf将很好地通过。同样的情况不适用于SVG。

您似乎已经严格地设置了要求，以确保不可能有任何解决方案。谢谢，@RobertLongson，实际上-我正在寻找一些聪明的破解方法或变通方法，以便第三方库有时间迎头赶上。我假设依赖event.target.className作为字符串现在是一个bug，在我们有了一个有效的（根据规范）案例之后，这是不正确的。因此，我的目标是在第三方供应商修复代码、更新库、恢复“解决方案”之前解决它。SVG已经存在20年了。如果图书馆有任何支持它的意图的话，他们现在已经有了。如果您使用的是SVG，请转向更好的库。至于您最后的观察，这是错误的。SVG中有一个用于类名称的setter。我认为您适合这个setter。我添加了一个小示例。然后-我还发现W3C规范在这里说：className在某个时候可能会被弃用。不知道该怎么想或怎么做。我将不得不研究，如果从SVG切换可能是一个解决方案。非常感谢！看起来很有希望。我将很快测试它，并返回一些结果。