如何使用JavaScript将CSS类分配给svg元素的标题？

Question

I have used this: That does not work. 我用过：这行不通。 I have added both of urs suggestion.. but it did not work! 我添加了我们的两个建议。.但是没有用！

svg
{
 width:720px;
 height:50px;
 border:#999999 solid 2px;
}
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #8B8386;
border-radius: 5px;
top:21px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
font-family:calibri;
font-weight:700
}
</style>
<body>
<table>
<tr>
    <td><div id="first" style="padding:2px">Machine:</div></td>

    <td><div id="second"><svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns: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": "Show up: 12:30 \nstatus:Break down \nDuration:100"  
    },
    {
        "srno" : 2 ,
        "status" : "Mold-Change" , 
        "duration" :70 ,
        "color" : "#FF8000",
        "start_time": 100,
        "tooltip": "Show up: 12:30 \nstatus:Break down \nDuration: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);
<!--End of Rectangle-->

<!--Drawing Status on 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);
<!--Drawing Status on rect-->

<!--Drawing Tooltip 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);

<!--Drawing Tooltip on rect-->

}
};
</script>

Please suggest to give style to title.I have used this: That does not work. 请建议给标题加上样式。我用过：这不起作用。 I have added both of urs suggestion.. but it did not work! 我添加了我们的两个建议。.但是没有用！

Answer 1

1.) this element has not been inserted in the DOM so you cannot use document.getElementByTagName('title') 1.）此元素尚未插入DOM中，因此无法使用document.getElementByTagName（'title'）
2.) document.getElementByTagName('title')[0] return the title tag of the document which is used to specify the title of the document/page. 2.）document.getElementByTagName（'title'）[0]返回文档的标题标签，该标签用于指定文档/页面的标题。

what you should do is this: 您应该做的是这样的：

var title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
title.textContent = data[i].title;//JSON object That works
title.setAttribute('class','tooltip');

Assign the attribute on the reference of the element you just created ie title and not document.getElementsByTagName('title')[0]. 在刚刚创建的元素的引用上分配属性，即标题，而不是document.getElementsByTagName（'title'）[0]。

Answer 2

You can add it as below: 您可以如下添加：

title.classList.add("tooltip");

Here is the DEMO 这是演示

UPDATE: 更新：

Check this Updated Demo 检查此更新的演示

There were some console errors which I have cleared. 我已经清除了一些控制台错误。

Just copy and paste the javascript part as it is in your page and see that class will be added now. 只需复制并粘贴页面中的javascript部分，即可立即添加该类。 One major change was that you were adding class to title along with . 一个主要的变化是您正在将class与title一起添加. like title.classList.add('.tooltip'); 像title.classList.add('.tooltip'); but it should have been without . 但是应该没有. like title.classList.add('tooltip'); 像title.classList.add('tooltip'); Check the demo and let me know!! 检查演示，让我知道！

如何使用JavaScript将CSS类分配给svg元素的标题？

问题描述

2 个解决方案

解决方案1
0 2015-05-07 07:13:53

解决方案2
0 2015-05-07 07:20:43

如何使用JavaScript将CSS类分配给svg元素的标题？

问题描述

2 个解决方案

解决方案1 0 2015-05-07 07:13:53

解决方案2 0 2015-05-07 07:20:43

解决方案1
0 2015-05-07 07:13:53

解决方案2
0 2015-05-07 07:20:43