如何使用JavaScript分配一个CSS类到svg元素的标题？ [英] how to assign a css class to title of svg element using javascript?

问题描述

我已经使用过了：这不起作用。
我已经添加了两个urs建议..但它不起作用！

  svg 
 {
宽度：720px; 
 height：50px; 
 border：＃999999 solid 2px; 
} 
 .tooltip {
 display：inline; 
职位：亲属; 
} 
 .tooltip：hover：在{
 background：＃8B8386; 
 border-radius：5px; 
 top：21px; 
颜色：#fff; 
 content：attr（title）;剩余
：20％; 
 padding：5px 15px; 
位置：绝对; 
 z-index：98; 
 width：220px; 
 font-family：calibri; 
 font-weight：700 
} 
< / style> 
< body> 
< table> 
< tr> 
< td>< div id =firststyle =padding：2px> Machine：< / div>< / td> 
 
< td>< div id =second>< svg id =mySVGxmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlink>< / svg>< / div>< / td> 
< / tr> 
< / table> 
< script> 
 window.onload = function（）{
 var data = [
 {
srno：1，
status：Breakdown，
duration：100，
color：＃CC0000，
start_time：0，
tooltip：出现：12:30 \\\
status：Break down \ nDuration：100
}，
 {
srno：2，
status：模具更换，
持续时间： 70，
color：＃FF8000，
start_time：100，
tooltip：出现：12:30 \\\
status：细分\\\
Duration： 100
} 
]; 
 var svg = document.createElementNS（http://www.w3.org/2000/svg，svg）; 
 var svgNS = svg.namespaceURI; 
 
 for（var i = 0; i< data.length; i ++）{
 <！ -  Drawing Rectangle  - > 
 var rect = document.createElementNS（svgNS，'rect'）; 
 
 var width = data [i] .duration; 
 
 rect.setAttribute（'x'，data [i] .start_time）; 
 rect.setAttribute（'y'，0）; 
 rect.setAttribute（'width'，data [i] .duration）; 
 rect.setAttribute（'height'，50）; 
 rect.setAttribute（'fill'，data [i] .color）; 
 
 document.getElementById（mySVG）。appendChild（rect）; 
 <！ -   - 矩形末端 - > 
 
 <！ -   -  rect上的绘图状态 - > 
 var status = document.createElementNS（'http://www.w3.org/2000/svg'，'text'）; 
 status.setAttribute（'x'，data [i] .start_time + 2）; 
 status.setAttribute（'y'，'25'）; 
 status.setAttribute（'fill'，'#fff'）; 
 status.textContent = data [i] .status; 
 
 document.getElementById（mySVG）。appendChild（status）; 
 <！ - 绘制rect的状态 - > 
 
 <！ - 绘制工具提示on rect  - > 
 var textWrapper = document.createElementNS（'http://www.w3.org/2000/svg'，'foreignObject'）; 
 textWrapper.setAttribute（'x'，data [i] .start_time）; 
 textWrapper.setAttribute（'y'，'0'）; 
 textWrapper.setAttribute（'width'，data [i] .duration）; 
 textWrapper.setAttribute（'height'，50）; 
 
 var text = document.createElement（P）; 
 text.setAttribute（'title'，data [i] .tooltip）; 
 text.style.height =50px; 
 textWrapper.appendChild（text）; 
 
 var title = document.createElementNS（'http://www.w3.org/2000/svg'，'title'）; 
 title.textContent = data [i] .title; 
 title.classList.add（'。tooltip'）; 
 rect.appendChild（title）; 
 
 document.getElementById（mySVG）。appendChild（textWrapper）; 
 
 <！ - 绘制工具提示on rect  - > 
 
} 
}; 
< / script> 
  

请建议给title.I使用这个样式：这是行不通的。
我已经添加了两个urs建议..但它不起作用！

解决方案

您可以按如下所示添加它：

  title.classList.add（tooltip）; 
  

以下是 DEMO
$ b 更新：

检查 更新的演示

我清除了一些控制台错误。

只需复制并粘贴 javascript 部分，因为它在您的页面中，并且看到该类将立即添加。一个主要的变化是，你正在为