相关疑难解决方法(0)

使用Javascript在SVG中追加路径子

美好的一天,

我在创建路径并使用SVG元素中的"appendChild"显示它时遇到了难以置信的困难.

我必须遗漏一些非常简单的东西,因为我已经倾注了W3C的规格,w3schools.com,各种帖子以及各种方式尝试忍者谷歌.

我在FireFox和Chrome中进行测试.

我有一个简单的svg文件:

<svg xmlns:svg ... id="fullPageID">
 <image id="timer1" x="100" y="100" width="100px" height="100px" xlink:href="../component/timer/timer1.svg" />  
 <image id="battery1" x="200" y="200" width="100px" height="100px" xlink:href="../component/battery/30x20_ochre.svg" />
 <script xlink:href="pathMaker.js" type="text/javascript" id="pathMaker" />  
</svg>
Run Code Online (Sandbox Code Playgroud)

我试图使用的脚本如下:

newpath = document.createElementNS("SVG","path");  
newpath.setAttribute("id", "pathIdD");  
newpath.setAttribute("d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");  
newpath.setAttribute("stroke", "black");  
newpath.setAttribute("stroke-width", 3);  
newpath.setAttribute("opacity", 1);  
newpath.setAttribute("fill", "none");

document.getElementById("fullPageID").appendChild(newpath);
Run Code Online (Sandbox Code Playgroud)

我只是想做一些简单的工作.我错误地认为我不需要像在Library中使用Javascript生成SVG路径那样复杂的解决方案吗?

谢谢你.

javascript svg

25
推荐指数
2
解决办法
2万
查看次数

如何在javascript生成的元素中设置具有区分大小写的名称的属性

svg在javascript中创建了一个元素,我需要设置一个区分大小写的属性:viewBox.

该元素的创建方式如下: var svgElem = document.createElement('svg');

问题是当它通过svgElem.setAttribute("viewBox", "0,0,100,100")DOM 设置该属性并附加到DOM时,结果元素显示如下: <svg viewbox="0,0,100,100"></svg>

这不起作用,因为viewBox它区分大小写,如果字母B是小写的,它将不会产生任何影响.

IE只允许这样的情况使用IFlag参数,但是我的目标受众仅限于FireFox和Chrome用户,我没有找到IFlag setAttribute.

有没有一种方法可以在不使用innerHTML和无库javascript的情况下完成这项工作?

编辑:我也尝试使用点符号没有成功 svg.viewBox = "0,0,100,100"

html javascript svg

14
推荐指数
1
解决办法
2687
查看次数

标签 统计

javascript ×2

svg ×2

html ×1