如何在路徑標記svg中指定座標x和y？

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

這裏是解決方案建立與@Peter Collingridge的幫助

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; 
 
}

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

 
rect { 
 
    fill: #FEFECE; 
 
    stroke: #A80036; 
 
    stroke-width: 1.5; 
 
}

<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>

Answer 2

對於一個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），但移動到文字。