Question

我有一个代表一些容器的svg，我希望用JavaScript在每个容器中动态添加。

我有这个代码在容器中添加一个十字架：

.close-x {
  stroke: black;
  fill: transparent;
  stroke-linecap: round;
  stroke-width: 2;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentscripttype="application/ecmascript" contentstyletype="text/css" height="555px" preserveAspectRatio="none" style="width:1181px;height:555px;" version="1.1" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g>
<!--entity cadvisor-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="97" x="133.675" y="8"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="210.675" y="13"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="15"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="19"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="148.675" y="41.3027">cadvisor</text>
<path class="close-x" d="M 140,12 L 150,25 M 150,12 L 140,25"></path>
</g>
</svg>

但它是静态的，我想动态地制作它。

使用JavaScript我可以获得<text>的位置（我不能提供小提琴，因为它永远不会起作用我不知道为什么但是在我的JS中它起作用）

var list = document.getElementsByTagName("svg")[0].childNodes[1].childNodes;
    console.log(list)

      for (var x in list) {
        if (list.hasOwnProperty(x)) {
          if(list[x].tagName === "text"){
            console.log("-----------------");
            console.log(list[x]);
            console.log("y: ");
            console.log(list[x].y.baseVal[0].valueAsString);
            console.log("x: ")
            console.log(list[x].x.baseVal[0].valueAsString);

            //<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />

          }
        }
      }

但如果我尝试<path class="close-x" y="81" x="125"></path>，我就不会展示十字架......

Answer 1

要显示path元素，需要d属性来确定其形状。您不能将x和y属性用于路径。你可以做的是在路径中添加一个转换变换，例如：

<path class="close-x" transform="translate(10, 20)" d="M 140,12 L 150,25 M 150,12 L 140,25"></path>

所以使用JS来查找文本元素的属性（可能最好给它一个id）并使用它们进行转换。

var textEl = document.getElementsByTagName('text')[0];
var pathEl = document.getElementsByTagName('path')[0];

var x = parseFloat(textEl.getAttribute('x')) - 8;
var y = parseFloat(textEl.getAttribute('y')) - 29;

pathEl.setAttribute("transform", "translate(" + 
x + " " + y + ")");

.close-x {
  stroke: black;
  fill: transparent;
  stroke-linecap: round;
  stroke-width: 2;
}

rect {
  fill: #FEFECE;
  stroke: #A80036;
  stroke-width: 1.5;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="555px" preserveAspectRatio="none" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g id="messageBox" >
<!--entity cadvisor-->
<rect filter="url(#f491e1k)" height="46.29" width="97" x="100" y="0"></rect>
<rect height="10" width="15" x="177" y="5"></rect>
<rect height="2" width="4" x="175" y="7"></rect>
<rect height="2" width="4" x="175" y="11"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="115" y="33.3027">cadvisor</text>
<path class="close-x" d="M 0,0 l10,13 M 10,0 l-10 13"></path>
</g>
</svg>

请注意，十字架从（0,0）开始，但移动到文本所在的位置。

Answer 2

这是在@Peter Collingridge的帮助下建立的解决方案

＆＃13;

document.getElementById("a").onclick = function(){
  var textEl = document.getElementsByTagName('text')[0];

  var x = parseFloat(textEl.getAttribute('x')) - 8;
  var y = parseFloat(textEl.getAttribute('y')) - 29;
 $(textEl).after("<path class='close-x' transform='translate("+x +"," + y +")' d='M 0,0 l10,13 M 10,0 l-10 13'></path>");
 
  var myHtml = $("#b").html();
  document.getElementById("b").innerHTML = myHtml;
}

＆＃13;

.close-x {
  stroke: black;
  fill: transparent;
  stroke-linecap: round;
  stroke-width: 2;
}

rect {
  fill: #FEFECE;
  stroke: #A80036;
  stroke-width: 1.5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="a">click</button>
<div id="b">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="555px" preserveAspectRatio="none" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g id="messageBox" >
<!--entity cadvisor-->
<rect filter="url(#f491e1k)" height="46.29" width="97" x="100" y="0"></rect>
<rect height="10" width="15" x="177" y="5"></rect>
<rect height="2" width="4" x="175" y="7"></rect>
<rect height="2" width="4" x="175" y="11"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="115" y="33.3027">cadvisor</text>
</g>
</svg>
</div>

＆＃13;

如何在路径标签svg中指定坐标x和y？

2 个答案: