我们可以使用简单的javascript，DOM和css在svg元素的mousehover上创建div以获得多行工具提示吗？

As I am new to svg, I have a new problem in it, I am trying to create a simple graph where I need to have multiline tooltip. Please suggest how to add tooltip (JSON object) to javascript, to display it as a multiline tooltip? And can we use div, give properties to div and use it as a tooltip, like making it visible or invisible on mouse hover event?

由于我是svg的新手,我有一个新问题,我正在尝试创建一个简单的图形,我需要有多行工具提示。请建议如何向javascript添加工具提示(JSON对象),将其显示为多行工具提示?我们可以使用div,为div提供属性并将其用作工具提示,例如在鼠标悬停事件中使其可见或不可见吗?

    window.onload = function(){
    var data = [  
    {   
        "srno" : 1 ,
        "start_time":0,
        "status" : "Breakdown" , 
        "duration" : 100,
        "color" : "#CC0000",
        "tooltip"   :   "Show up: 12:30
                    status:Break down
                    Duration:100"           
    },
    {
        "srno" : 2 ,
        "status" : "Mold-Change" , 
        "duration" :70 ,
        "color" : "#FF8000",
        "start_time":100 ,
        "tooltip"   :   "Show up: 2:30
                    status:Break down
                    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++){

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);

        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', data [i].start_time+2 );
        text.setAttribute('y', '25');
        text.setAttribute('fill', '#fff');
        text.textContent = data[i].status;

        var textWrapper = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
        var tips = document.createElement("P");
        tips.innerHTML = data[i].tooltip;

        document.getElementById("mySVG").appendChild(rect);
        document.getElementById("mySVG").appendChild(text); 

        rect.appendChild(textWrapper);
        }
   };

With single line It works, please suggest about multilines? I just wanted the way to create multiline using Json or to create div which will contain information same as tooltip?

单线它有效,请建议多线?我只想要使用Json创建多行的方法或创建包含与工具提示相同的信息的div?

1 个解决方案

#1

You need to add a foreignObject instead of a text element and then put your content inside it (I wrapped it with a p, but it could be any HTML). After that, everything becomes plain HTML.

你需要添加一个foreignObject而不是一个文本元素,然后把你的内容放在里面(我用p包装它,但它可以是任何HTML)。之后,一切都变成了纯HTML。

window.onload = function () {
    var data = [
        {
            "srno": 1,
            "start_time": 0,
            "status": "Breakdown",
            "duration": 100,
            "color": "#CC0000",
            "tooltip": "Show up: 12:30 <br />status:Break down <br />Duration:100"//JSON object to show as tooltip in multilines
        },
        {
            "srno": 2,
            "status": "Mold-Change",
            "duration": 70,
            "color": "#FF8000",
            "start_time": 100,
            "tooltip": "Show up: 2:30 <br />status:Mold-Change <br />Duration:70"//JSON object to show as tooltip in multilines
        }
    ];
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    var svgNS = svg.namespaceURI;


    for (var i = 0 ; i < data.length ; i++) {

        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);

        var textWrapper = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
        textWrapper.setAttribute('x', data[i].start_time + 2);
        textWrapper.setAttribute('y', '25');
        textWrapper.setAttribute('fill', '#fff');
        textWrapper.setAttribute('width', data[i].duration);
        textWrapper.setAttribute('height', 50);

        var text = document.createElement("P");
        text.innerHTML = data[i].tooltip;
        textWrapper.appendChild(text);

        var title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
        title.textContent = data[i].title;

        document.getElementById("mySVG").appendChild(rect);
        document.getElementById("mySVG").appendChild(textWrapper);

        rect.appendChild(title);
    }
};

Other alternatives in http://www.w3.org/TR/SVG/text.html#Introduction (3rd paragraph) and reason for this in http://www.w3.org/TR/SVG/text.html#TextLayoutIntroduction (2nd paragraph)

http://www.w3.org/TR/SVG/text.html#Introduction(第3段)中的其他替代方案及其原因在http://www.w3.org/TR/SVG/text.html#TextLayoutIntroduction中(第2段)

Edit

For a tooltip, try this (on Chrome)

对于工具提示,请尝试此操作(在Chrome上)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SO</title>
    <style>
        p {
            display: block;
        }
    </style>
    <script>
        window.onload = function () {
            var data = [
                {
                    "srno": 1,
                    "start_time": 0,
                    "status": "Breakdown",
                    "duration": 100,
                    "color": "#CC0000",
                    "tooltip": "Show up: 12:30 \nstatus:Break down \nDuration:100"//JSON object to show as tooltip in multilines
                },
                {
                    "srno": 2,
                    "status": "Mold-Change",
                    "duration": 70,
                    "color": "#FF8000",
                    "start_time": 100,
                    "tooltip": "Show up: 2:30 \nstatus:Mold-Change \nDuration:70"//JSON object to show as tooltip in multilines
                }
            ];
            var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            var svgNS = svg.namespaceURI;


            for (var i = 0 ; i < data.length ; i++) {

                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);

                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;

                document.getElementById("mySVG").appendChild(rect);
                document.getElementById("mySVG").appendChild(textWrapper);

                rect.appendChild(title);
            }
        };
    </script>
</head>
<body>
    <svg id="mySVG">
    </svg>
</body>

#1