Question

当我运行此代码时，它向我显示一个空白屏幕但是当我使用chrome中的开发人员工具更新代码时，它会显示数据。请帮助解释为什么当我使用chrome的开发工具更新代码时显示的原因，是因为浏览器再次运行DOM，如果是，那么为什么不在第一次显示它时。这是否由于foreignObject而发生。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <svg id="t">
    <g>
        <text x="10" y="10">hello</text>
    </g>
    </svg>
        <script>
            var s = document.getElementById('t');
            var g = s.childNodes[1];
            console.log(g.childNodes[1].remove());
            var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject");

            foreign.setAttribute('width', 500);
            foreign.setAttribute('height', 150);
            var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            txt.setAttribute('x', '10');
            txt.setAttribute('y', '10');
            var t = document.createTextNode("This is a paragraph.");
            txt.appendChild(t);
            foreign.appendChild(txt);
            g.appendChild(foreign);

 </script>        
</body>
</html>

Answer 1

svg文本节点不能是foreignObject节点的子节点，你需要一个svg节点。 E.g。

＆＃13;

        var s = document.getElementById('t');
        var g = s.childNodes[1];
        console.log(g.childNodes[1].remove());
        var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject");

        foreign.setAttribute('width', 500);
        foreign.setAttribute('height', 150);
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        txt.setAttribute('x', '10');
        txt.setAttribute('y', '30');
        var t = document.createTextNode("This is a paragraph.");
        txt.appendChild(t);
        foreign.appendChild(svg);
        svg.appendChild(txt);
        g.appendChild(foreign);

＆＃13;

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <svg id="t">
    <g>
        <text x="10" y="30">hello</text>
    </g>
    </svg>
</body>
</html>

＆＃13;

话虽如此，我不知道你为什么要使用foreignObject，除非你要创建一些非svg节点。

让人们兴奋的另一件事是在正确的命名空间中创建元素。 SVG元素需要进入SVG名称空间（http://www.w3.org/2000/svg）。

也许重新运行会迫使Chrome自行创建svg父节点，或者它只是Chrome的一个bug。

Answer 2

@JabranSaeed if you want to use foroeignObject,beter to follow this method 

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <svg id="t">
    <g>

    </g>
    </svg>
<script>
  var s = document.getElementById('t');
        var g = s.childNodes[1];

        var foreign = document.createElementNS

('http://www.w3.org/2000/svg',"foreignObject");

        foreign.setAttribute('width', 500);
        foreign.setAttribute('height',500);
        var iDivele = document.createElement('div');
        var ob = document.createTextNode("xxxx");
        iDiv.appendChild(ov);
        foreign.appendChild(iDivele);

        g.appendChild(foreign);
</script>
</body>
</html>

Answer 3

@JabranSaeed if you want to use foroeignObject to insert non svg element then:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <svg id="t">
    <g>

    </g>
    </svg>
<script>
  var s = document.getElementById('t');
        var g = s.childNodes[1];

        var foreign = document.createElementNS

('http://www.w3.org/2000/svg',"foreignObject");

        foreign.setAttribute('width', 500);
        foreign.setAttribute('height',500);
        var iDiv = document.createElement('div');
        var t = document.createTextNode("This is a paragraph.");
        iDiv.appendChild(t);
        foreign.appendChild(iDiv);

        g.appendChild(foreign);
</script>
</body>
</html>

Answer 4

实际上你的附属儿童部分正在创造问题。

你没有按正确的顺序添加它。

检查以下代码并尝试

NSString *uploadUrl =@"<Your host URL>";

[JSONHTTPClient postJSONFromURLWithString:uploadUrl params:nil
                                   completion:^(NSDictionary *json, JSONModelError *err)
     {
         if(err == nil)
         {
             UIAlertView *alert=[[UIAlertView alloc]initWithTitle:@"success" message:@"uploaded" delegate:self cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
             [alert show];
             completionHanldler(json);
         }
         else
         {
             UIAlertView *alert=[[UIAlertView alloc]initWithTitle:@"Failed" message:@"uploaded" delegate:self cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
             [alert show];

             NSMutableDictionary *errorDict=[[NSMutableDictionary alloc]init];
             if(err.code==-1009)
                 [errorDict setObject:@"The Internet connection appears to be offline."forKey:@"error"];
             else
                 [errorDict setObject:@"Error occurred. Please try again!"forKey:@"error"];

             completionHanldler(errorDict);
         }
     }];

让我知道它是否正常工作

使用javascript在svg中添加动态异物

4 个答案: