Question

当标题标签动态附加文本时，标题标签内容不会在文本的鼠标悬停中动态显示，但如果在代码中（静态）给出相同的标题标签，则它正常工作。

任何人都可以帮助我吗？

＆＃13;

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>JSP Page</title>
  <script>
    function appendTitle() {
      try {
        var node = document.createElement("title");
        node.innerText = "I love SVG";
        document.getElementById("abcd").appendChild(node);
      } catch (e) {

      }
    }
  </script>
</head>

<body>
  <svg height="30" width="200">
        <text x="0" y="15" fill="red" id="abcd">

        I love SVG!
        </text>
        </svg>
  <button onclick="appendTitle()">click</button>
</body>

＆＃13;

Answer 1

这里有几个问题：

必须使用createElementNS在SVG名称空间中创建SVG元素，您实际上已创建了HTML标题元素。
SVG元素不支持innerText，您需要textContent。更好的textContent也适用于HTML元素。

＆＃13;

function appendTitle(){
    try{
        var node = document.createElementNS("http://www.w3.org/2000/svg", "title");
        node.textContent = "I love SVG";
                document.getElementById("abcd").appendChild(node); 
    }catch(e){

    }
}

＆＃13;

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
</head>
<body>
    <svg height="30" width="200">
    <text x="0" y="15" fill="red" id="abcd">

    I love SVG!
    </text>
    </svg>
    <button onclick="appendTitle()">click</button>
</body>

＆＃13;

带有标题标记的鼠标悬停问题

1 个答案: