我注意到，当您使用 JS 附加文本时，某些样式规则有效，而其他规则则停止工作。具体来说，请考虑我的 css 样式规则，该规则在悬停时创建 border-bottom...
var svg = d3.select('body')
.append('svg')
.attr('height',200)
.attr('width',200);
svg.append('a')
.append('text')
.html('This is not a text.')
.attr('font-size', '14px')
.attr('class', 'content-text-1')
.attr('x', 10)
.attr('y', 20);.content-text-1:hover {
border-bottom: 1px solid blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
</body>我不相信这是一个“异步”类型的问题，因为当我创建其他东西时，例如 svg rects 或 circles (仅举一个例子)很少)，它们可以在事后设计。
问题:是什么导致 border-bottom 不显示？
最佳答案
使用 div 而不是 svg，因为 svg 有其独特的标识，不支持 border-bottom。
var div = d3.select('body')
.append('div')
.attr('height',200)
.attr('width',200);
div.append('a')
.append('text')
.html('This is not a text.')
.attr('font-size', '14px')
.attr('class', 'content-text-1')
.attr('x', 10)
.attr('y', 20);.content-text-1:hover {
border-bottom: 1px solid blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
</body>关于javascript - 无法将 CSS 样式应用于 SVG 文本元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47278149/