javascript – 用jquery创建的html不显示

发布时间:2020-08-01 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了javascript – 用jquery创建的html不显示脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > jquery’s append not working with svg element?                                    14个
我有一个部分使用javascript / jQuery创建的HTML文件:

<!DOCTYPE html>
<html>
  <head>
    <title>with-js</title>
    <script type="text/javascript" src="./scripts/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="./scripts/object.js"></script> 
  </head>
  <body>
    <div id="depiction"></div>
  </body>
</html>

以下脚本object.js创建其他HTML元素:

jQuery(document).ready(function() {
   var svg = jQuery('<svg height="466" width="1842" ></svg>');
   var g = jQuery('<g transform="translate(400 200)"></g>');
   var t = jQuery('<text text-anchor="middle" x="20" y="26">r1</text>');
   var r = jQuery('<rect class="svg_elem" id="elem_1" width="41px" height="40px"></rect>');
   g.append(t).append(r).appendTo(svg);
   svg.appendTo(jQuery('#depiction'));
});

当我在浏览器中加载HTML文件时,< g>元素不可见.但是,我可以使用检查器工具恢复完整的HTML代码并将其粘贴到另一个文件中,删除对JS脚本的引用:

<!DOCTYPE html>
<html>
  <head>
    <title>without-js</title>
  </head>
  <body>
    <div id="depiction">
      <svg width="1842" height="466">
        <g transform="translate(400 200)">
          <text y="26" x="20" text-anchor="middle">r1</text>
          <rect id="elem_1" class="svg_elem" height="40px" width="41px"></rect>
        </g>
      </svg>
    </div>
  </body>
</html>

现在,< g>在浏览器中加载新的HTML文件时,元素会正确显示!

任何人都可以向我解释一下吗?

提前致谢

解决方法

jQuery使用createElement()函数创建元素,但对于SVG,您需要使用createElementNS().

解决方案:

简单的方法:使用d3.js库而不是jQuery;

黑客友好的方式:重写部分jQuery代码:

// line 526 in jquery-X.X.X.js,in my case it is jquery-1.9.1.js   
// Single tag
if ( parsed ) {
    // ----------------------------------------------------
    var xml_html_element;
    if ( parsed[1] == "svg" || parsed[1] == "path" ) {
        xml_html_element = context.createElementNS( "http://www.w3.org/2000/svg",parsed[1] );
    } else {
        xml_html_element = context.createElement( parsed[1] );
    }
    return [xml_html_element];
    // ----------------------------------------------------
    //return [ context.createElement( parsed[1] ) ];

}

现在,您可以使用jQuery:

var $svg = $("<svg>").attr({'version': "1.1"});
var $path = $("<path>").attr({
    'd': 'M' + 10 + ',' + 100 + ' C' + 200 + ',' + 150 + ' ' + 200 + ',' + 170 + ' ' + 300 + ',' + 250,'fill': "none",'stroke': "rgba(100,100,0.9)",'stroke-width': "1"
});
var $body = $("body");
$body.append($svg.append($path));

当然,为了您的个人需要,您应该扩展此hack中的SVG标记数量(第530行):

if ( parsed[1] == "svg" 
     || parsed[1] == "g" 
     || parsed[1] == "path" 
     || parsed[1] == "line") {
 ...
}

总结

以上是脚本之家为你收集整理的javascript – 用jquery创建的html不显示全部内容,希望文章能够帮你解决javascript – 用jquery创建的html不显示所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!