如何使用 javascript 将 css 类分配给 svg 元素的标题？答案

【问题标题】：how to assign a css class to title of svg element using javascript?如何使用 javascript 将 css 类分配给 svg 元素的标题？
【发布时间】：2015-07-17 14:15:58
【问题描述】：

我用过这个：那行不通。我已经添加了你的两个建议..但它没有用！

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>

请建议为标题赋予样式。我用过这个：那行不通。我已经添加了你的两个建议..但它没有用！

【问题讨论】：

不工作是什么意思？有什么错误吗？检查您的浏览器控制台..
它看起来像默认工具提示，标题上没有应用 css..
oho..能否请您在小提琴中重现该问题？
@Lal 请检查代码。
@Lal 在浏览器控制台中没有错误

标签： javascript jquery html css svg

【解决方案1】：

您可以如下添加：

title.classList.add("tooltip");

这里是DEMO

更新：

检查这个Updated Demo

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

只需将javascript 部分复制并粘贴到您的页面中，即可看到现在将添加该类。一个主要的变化是你在标题中添加了类以及 . 像 title.classList.add('.tooltip'); 但它应该没有 . 像 title.classList.add('tooltip'); 检查演示并让我知道！！

【讨论】：

我已将此标题分配给 svg 元素，这是没有出现的原因吗？@Guruprasad Rao
不是那样的！你可以很容易地操纵它！现在有什么问题？ className 不是没有被分配吗？？
它显示默认的没有效果。@Guruprasad Rao
你看演示了吗！！检查console 以查看元素！否则，您需要发布问题的完整详细信息，例如您如何附加 title 元素！！
这就是为什么我说，我需要更多关于你的代码的细节！！因此，如果您发布完整的代码或复制您面临的问题，那就太好了！ :)

【解决方案2】：

1.) 此元素尚未插入 DOM，因此您无法使用 document.getElementByTagName('title')
2.) document.getElementByTagName('title')[0] 返回文档的标题标签，用于指定文档/页面的标题。

你应该这样做：

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

在您刚刚创建的元素的引用上分配属性，即 title 而不是 document.getElementsByTagName('title')[0]。

【讨论】：

我试过了，但没用？@bhavya_w 和 @Guruprasad Rao
Guruprasad 也这么说@bhavya_w，但您建议的选项不起作用
@sia.. 我会调查你的问题，希望能找到解决方案，但你能告诉我你想在这里实现什么（更大的图景）......？
工具提示到 svg 元素，以定义 css..@bhavya_w
如果不是possble请转告@bhavya_w