Javascript 无法将CSS样式应用于SVG文本元素

我注意到，当您使用JS附加文本时，一些样式规则起作用，而另一些则停止工作。具体来说，请考虑我的CSS样式规则，它在悬停……/p>上创建<代码>边框底部/代码>。

var svg=d3.select（'body'）
.append（'svg'）
.attr（'height'，200）
.attr（'宽度'，200）；
append（'a'）
.append（'文本'）
.html（'这不是文本'）
.attr（'font-size'，'14px'）
.attr（'class'，'content-text-1'）
.attr（'x'，10）
.attr（'y'，20）
.content-text-1:悬停{
边框底部：1px纯蓝色；
}
Give
div
而不是
svg
因为
svg
有其唯一的标识，所以不支持
边框底部


var div=d3.选择（'body'）
.append（'div'））
.attr（'height'，200）
.attr（'宽度'，200）；
div.append（'a'）
.append（'文本'）
.html（'这不是文本'）
.attr（'font-size'，'14px'）
.attr（'class'，'content-text-1'）
.attr（'x'，10）
.attr（'y'，20）
.content-text-1:悬停{
边框底部：1px纯蓝色；
}
这里的问题不是CSS，而是SVG。SVG不支持
边框底部
属性

例如，如果您有HTML元素，您可以清楚地看到CSS是有效的：


var div=d3.选择（'body'）
.append（'div'））
.html（'这不是文本'）
.style（'font-size'，'14px'）
.attr（'class'，'content-text-1'）
.content-text-1:悬停{
边框底部：1px纯蓝色；
}
嗯，哇，为什么变量名会有这么大的不同？
svg
是一个格利奇保留名称还是什么？@ArashHowaida它与变量名完全无关。这里的答案是附加一个
div
，这是一个HTML元素。SVG是一种基于XML的二维图形矢量图像格式，支持交互性和动画。有关更多信息，请参见