如何使用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
部分,因为它在您的页面中,并且看到该类将立即添加。一个主要的变化是,你正在为
。
像 title.classList.add('tooltip');
检查演示并让我知道!! 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!
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. One major change was that you were adding class to title along with .
like title.classList.add('.tooltip');
but it should have been without .
like title.classList.add('tooltip');
Check the demo and let me know!!
这篇关于如何使用JavaScript分配一个CSS类到svg元素的标题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!