2 m0 37285193 m0_37285193 于 2017.01.08 15:28 提问

为什么在javascript中动态创建的line标签在svg标签中显示不出来
 <html>
    <head>
        <title></title>
    </head>
    <body>
        <svg width="500" height="400">
            <line x1="5" y1="5" x2="250" y2="200" style="stroke:black; stroke-width:1px;" />
        </svg>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            var line  = $('<line x1="5" y1="5" x2="4250" y2="400" style="stroke:black; stroke-width:1px;" />')
            line.appendTo($('svg'))
        </script>
    </body>
</html>

1个回答

m0_37285193
m0_37285193   2017.01.08 15:34

svg是xml文档,html的xhtml文档,两种格式从理论上来讲是不一样的,所以直接用js操作html的语法应用到svg,是不起作用的。即使使用appendChild等语法也不会显示出来。
可以使用innerHTML的做法,将svg字符串拼到你的容器上。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
html页面中js动态新建svg元素
SVG test   function init()  {  var svgLayer = document.getElementById('svgLayer');  var svgNS="http://www.w3.org/2000/svg"; var nodeRect = document.createElementNS(svgNS,"rect"); nodeRect.setAt
SVG动态创建image失败解决方案
在用JS动态创建SVG标签的时候,像g标签,circle标签,rect标签等都可以正确创建并显示,但是image标签却总是不能显示。我的初始代码如下:var svgNS = 'http://www.w3.org/2000/svg'; var oImg = document.createElementNS(svgNS, 'image'); oImg.setAttribute('xlink:href',
HTML5学习之路--js动态添加svg节点
下面贴上完整代码。要注意一点:创建svg节点时,要使用createElementNS函数并传入节点名称的命名空间。否则创建出来的节点默认为html dom而不是svg dom。这样的话,将其append到svg节点下时,不会显示。 无标题文档 function onLoad(){ var mysvg = document.getElementById("svg_my");
解决svg标签在HTML中的渲染问题
在做项目时候我使用appendChild()方法添加到DOM树中时,它竟然没有渲染。百科中说:SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。所以猜测可能是html与xml两种语言的差异造成的。经过多次尝试过后,有两种方法可以解决。 方法一:使用$(‘svg’).html() &amp;amp;amp;lt;script&amp;amp;amp;...
如何动态向HTML中插入SVG元素(包括Line,path,marker..等)
1.使用dodument对象创建一个SVG元素marker,为元素引入svg的命名空间(必需引入命名空间,不然浏览器将此元素当做普通html标签插入文档流) var marker = document.createElementNS("http://www.w3.org/2000/svg","marker"); 2. 使用标签元素对象的setAttribute函数为元素的属性设值
div和其他标签不换行同行显示方法
在HTML中,让两个DIV在同一行显示,就是通过float属性来设置的,我们可以通过设置3个div,然后第一个div包裹住其他2个div,然后在设置宽高就可以了,我提交一段代码: DIV的同行测试 我是左边的固定测试文字 我是右边的固定测试文字
如何用js动态插入svg?如何在svg中在插入Dom元素
如何用js动态插入svg?如何在svg中在插入Dom元素? 最近遇到了这个问题,于是好好研究了一番。有这么一篇文章,可以关注。解释的很清楚。 http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element 粘出里面的关键代码:
svg中path标签的用法
除了上次的六个普通标签之外,SVG还支持复杂的路径标签:path   使用path标签时,就像用指令的方式来控制一只画笔,比如:移动画笔到某一坐标位置,画一条线,画一条曲线,完事了抬起画笔,OVER!   path支持的指令有:   M = moveto(M X,Y) :将画笔移动到指定的坐标位置 L = lineto(L X,Y) :画直线到指定的坐标位置 H = horizon
SVG 形状元素(rect、circle、ellipse、line、polyline、polygon、path)
SVG有一些预定义的形状元素 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 矩形 <rect> <rect> 用于创建 矩形 和 圆角矩形 (x,y)是矩形左上角坐标,默认是(0,0) (width,height)是矩形的宽度和高度 (rx,ry)是矩形圆角的水平半径和垂直半径 <s
LI标签在Ul中居中显示
这里用到了前面文章中的清除浮动的问题,值得一注意。先直接看一个例子吧:&lt;style&gt;*{margin:0;padding:0;}ul,ul li{list-style:none;}.clear:after{content:".";display:block;heigh