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

查看:90
本文介绍了如何使用JavaScript分配一个CSS类到svg元素的标题?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经使用过了:这不起作用。
我已经添加了两个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'); </$ c> </c $ c> < $ c>,但应该没有<code>。</code>像<code> title.classList.add('tooltip'); </code>检查演示并让我知道!! </p> <br/><p>I have used this: That does not work. I have added both of urs suggestion.. but it did not work!</p><pre><code>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> </code></pre><p>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!</p><div class="h2_lin"> 解决方案 </div><p>You can add it as below:</p><pre><code>title.classList.add("tooltip"); </code></pre><p>Here is the <strong><a href="http://jsfiddle.net/Guruprasad_Rao/vmfksf6t/1/" rel="nofollow">DEMO</a></strong></p> <p><strong>UPDATE:</strong></p> <p>Check this <strong><a href="http://jsfiddle.net/Guruprasad_Rao/o8n6urpt/" rel="nofollow">Updated Demo</a></strong></p> <p>There were some console errors which I have cleared.</p> <p>Just copy and paste the <code>javascript</code> 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 <code>.</code> like <code>title.classList.add('.tooltip');</code> but it should have been without <code>.</code> like <code>title.classList.add('tooltip');</code> Check the demo and let me know!!</p> <p>这篇关于如何使用JavaScript分配一个CSS类到svg元素的标题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('879188');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="JavaScript CSS 如何向一个元素添加和删除多个 CSS 类" href="/2564924.html"> JavaScript CSS 如何向一个元素添加和删除多个 CSS 类; </a> </li> <li> <a target="_blank" title="如何添加一个css类到JQuery中的Div元素?" href="/569243.html"> 如何添加一个css类到JQuery中的Div元素?; </a> </li> <li> <a target="_blank" title="在具有类的另一个SVG元素之前插入SVG元素" href="/878937.html"> 在具有类的另一个SVG元素之前插入SVG元素; </a> </li> <li> <a target="_blank" title="如何在JavaScript中添加一个类到DOM元素?" href="/651079.html"> 如何在JavaScript中添加一个类到DOM元素?; </a> </li> <li> <a target="_blank" title="SVG到PNG使用javascript保留CSS" href="/502269.html"> SVG到PNG使用javascript保留CSS; </a> </li> <li> <a target="_blank" title="如何使用另一个 CSS 类覆盖一个 CSS 类的属性" href="/2652646.html"> 如何使用另一个 CSS 类覆盖一个 CSS 类的属性; </a> </li> <li> <a target="_blank" title="一个SVG元素的outerHTML" href="/651336.html"> 一个SVG元素的outerHTML; </a> </li> <li> <a target="_blank" title="在一个元素上使用两个CSS类" href="/511023.html"> 在一个元素上使用两个CSS类; </a> </li> <li> <a target="_blank" title="在一个元素上使用两个 CSS 类" href="/2652603.html"> 在一个元素上使用两个 CSS 类; </a> </li> <li> <a target="_blank" title="给一个元素两个css类" href="/1297676.html"> 给一个元素两个css类; </a> </li> <li> <a target="_blank" title="如何添加一个css类到Raphael对象" href="/570232.html"> 如何添加一个css类到Raphael对象; </a> </li> <li> <a target="_blank" title="css选择一个带有2类的元素" href="/511950.html"> css选择一个带有2类的元素; </a> </li> <li> <a target="_blank" title="如何使用CSS(无js)选择每隔一个div类元素" href="/566735.html"> 如何使用CSS(无js)选择每隔一个div类元素; </a> </li> <li> <a target="_blank" title="如何使用CSS(无js)选择每隔一个div类元素" href="/583679.html"> 如何使用CSS(无js)选择每隔一个div类元素; </a> </li> <li> <a target="_blank" title="使用javascript添加一个img元素到div" href="/651413.html"> 使用javascript添加一个img元素到div; </a> </li> <li> <a target="_blank" title="如何通过CSS类和XPath找到一个元素?" href="/559910.html"> 如何通过CSS类和XPath找到一个元素?; </a> </li> <li> <a target="_blank" title="如何使用Javascript一个接一个地分配图像?" href="/1223905.html"> 如何使用Javascript一个接一个地分配图像?; </a> </li> <li> <a target="_blank" title="使用javascript将CSS类添加到具有另一个类名称的所有元素" href="/2022516.html"> 使用javascript将CSS类添加到具有另一个类名称的所有元素; </a> </li> <li> <a target="_blank" title="如何使用另一个CSS类覆盖CSS类的属性" href="/511440.html"> 如何使用另一个CSS类覆盖CSS类的属性; </a> </li> <li> <a target="_blank" title="使用CSS定位SVG元素" href="/566124.html"> 使用CSS定位SVG元素; </a> </li> <li> <a target="_blank" title="如何在一个元素上切换一个特定的类,其中分配了多个类?" href="/583999.html"> 如何在一个元素上切换一个特定的类,其中分配了多个类?; </a> </li> <li> <a target="_blank" title="单击另一个元素后,使用vanilla javascript将类添加/删除到其他元素" href="/1017208.html"> 单击另一个元素后,使用vanilla javascript将类添加/删除到其他元素; </a> </li> <li> <a target="_blank" title="聚焦和一个元素应该反映到CSS中的另一个元素" href="/580033.html"> 聚焦和一个元素应该反映到CSS中的另一个元素; </a> </li> <li> <a target="_blank" title="分配css类以形成从flask传递到jinja的元素" href="/2085608.html"> 分配css类以形成从flask传递到jinja的元素; </a> </li> <li> <a target="_blank" title="如何使用Javascript访问SVG元素" href="/1003043.html"> 如何使用Javascript访问SVG元素; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome(在Electron内部)突然重定向到chrome-error:// chromewebdata?" href="/1996151.html"> 为什么Chrome(在Electron内部)突然重定向到chrome-error:// chromewebdata?; </a> </li> <li> <a target="_blank" title="错误102(net :: ERR_CONNECTION_REFUSED):服务器拒绝连接" href="/749568.html"> 错误102(net :: ERR_CONNECTION_REFUSED):服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止:没有'Access-Control-Allow-Origin'标题'?" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止:没有'Access-Control-Allow-Origin'标题'?; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught(in promise)DOMException:play()失败,因为用户没有首先与文档交互。”在桌面上使用Chrome 66?" href="/884909.html"> 如何处理“Uncaught(in promise)DOMException:play()失败,因为用户没有首先与文档交互。”在桌面上使用Chrome 66?; </a> </li> <li> <a target="_blank" title="警告:添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告:添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件(视频/ MP2T媒体类型)?" href="/343346.html"> 如何在浏览器中播放.TS文件(视频/ MP2T媒体类型)?; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表,但转换为MIME类型text / html(似乎与web服务器无关)" href="/562873.html"> 资源解释为样式表,但转换为MIME类型text / html(似乎与web服务器无关); </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*',因为它的MIME类型(“应用/ JSON')不是可执行文件,并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*',因为它的MIME类型(“应用/ JSON')不是可执行文件,并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '如何,使用,javascript,分配,一个,css,类,到,svg,元素,的,标题'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接: <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section> <!--统计代码--> <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>