如何使用 javascript 将 css 类分配给 svg 元素的标题？
Posted
技术标签:
【中文标题】如何使用 javascript 将 css 类分配给 svg 元素的标题？【英文标题】：how to assign a css class to title of svg element using javascript? 【发布时间】：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 在浏览器控制台中没有错误 【参考方案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以上是关于如何使用 javascript 将 css 类分配给 svg 元素的标题？的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript CSS 如何向一个元素添加和删除多个 CSS 类
如何将 css 变量传递给 Javascript 对象中的媒体查询？ [复制]