小编Chr*_*ton的帖子

我试图将一个svg从一个div移动到另一个div. 这个堆栈问题提供了我试过的这个解决方案.

document.getElementById("LightBoxDiv").appendChild(svgId+"V");

当我尝试这个时,我收到了一个层次结构请求错误. 这个堆栈问题提出了几个可能是原因的事情.我不能说我有这些东西,但我不确定.Bot我的div在body元素中并没有嵌套在另一个中,然而,在使用javascript动态创建之前,其中一个div只有几行.这是我用来创建div的脚本.

var lightboxdiv = document.createElement('div');
lightboxdiv.id = "LightBoxDiv";
document.body.appendChild(lightboxdiv);
document.getElementById("LightBoxDiv").style.display="block";
document.getElementById("LightBoxDiv").style.position="fixed";
document.getElementById("LightBoxDiv").style.overflow="hidden";
document.getElementById("LightBoxDiv").style.padding="5%";
document.getElementById("LightBoxDiv").style.top=0;
document.getElementById("LightBoxDiv").style.left=0;
document.getElementById("LightBoxDiv").style.width="100%";
document.getElementById("LightBoxDiv").style.height="100%";
document.getElementById("LightBoxDiv").style.background="white";
document.getElementById("LightBoxDiv").style.zIndex="1001";
document.getElementById("LightBoxDiv").setAttribute("class","dotouch");

document.getElementById("LightBoxDiv").appendChild(svgId+"V");

最后一行是抛出错误的那一行.知道我做了什么导致错误吗？我该怎么办呢？

谢谢, - 克里斯托弗

我有一个svg文件,其中包含一个包含单行元素的组.我可以使用use元素并在我想要的任何位置制作几个参考副本.但是,我想使用javascript use动态添加和删​​除元素.有没有办法使用javascript将use我的行的svg 元素插入到我的组中？

<svg version="1.1" id="ex1-3rds-quarter-s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" width="323.333px" height="55.333px" viewBox="0 0 323.333 55.333" enable-background="new 0 0 323.333 55.333"
 xml:space="preserve">
<g id="ledgerlines">
  <line id="MidCLine1" fill="none" stroke="#000000" stroke-width="0.75" stroke-miterlimit="10" x1="48.09" y1="41.694" x2="57.924" y2="41.694"/>
</g>
</svg>

我不确定问这个的最好方法.我想将多个tspan子元素附加到单个svg文本对象.我有以下代码.

var tspanElement = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
var majNote1 = document.getElementById('majNote1');

function myFunction() {
 for(i=1;i<6;i++){
   tspanElement.textContent=i;
   tspanElement.setAttribute("id",i);
   majNote1.appendChild(tspanElement);
 }   
}

当我运行它时,看起来tspan元素只被附加一次而不是5次.是否可以重复使用相同的tspan变量并将其追加5次？

你可以在http://codepen.io/cmgdesignstudios/pen/VePwog?editors=101上看到一个例子.

我正在处理以下SVG文件. http://jsfiddle.net/slayerofgiants/9y3qc/8/

如果您从小提琴文件中注意到,水平滚动条延伸到SVG绘图宽度的大约两倍.除了SVG的边缘之外,只有白色空间.如果我删除了<g>和<text>元素,那么水平滚动条会消失,并且是屏幕宽度的大小.

你可以在这个第二个jsfiddle上看到这个 http://jsfiddle.net/slayerofgiants/m5zPv/

下面的代码是SVG,没有g包含配对text元素的元素.

<svg version="1.1" width="90%" id="ex1-3rds-quarter-s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px"  viewBox="0 0 323.333 55.333" enable-background="new 0 0 323.333 55.333"
 xml:space="preserve" preserveAspectRatio="xMinYMid meet">
     <font horiz-adv-x="1000">
<g id="fullTAB"  transform="scale(1.1,1)"  >
<g id="tablines" display="block">
        <line fill="none" id="lowE" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="45" x2="262" y2="45"/>
        <line fill="none" id="Astring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="38.5" x2="262" y2="38.5"/>
        <line fill="none" id="Dstring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="32" x2="262" y2="32"/>
        <line fill="none" id="Gstring" stroke="#000000" …