我正在使用一个svg元素，其中有path和foreignObject.我试图将foreignObject放置在路径的末尾.但我不知道该怎么做.
例如，这就是我try 的.
// global
const bound = document.querySelector('.bound');
const svgns = 'http://www.w3.org/2000/svg';
const line = document.querySelector('#valLine');
const length = line.getTotalLength();
const pct =1;
const point = line.getPointAtLength(length * pct);
// create svg text element
const textGroup = document.createElementNS(svgns,'g');
textGroup.setAttribute('class','textElement');
bound.appendChild(textGroup);
const text = document.createElementNS(svgns,'text');
text.setAttribute('x',`${point.x.toString()}`);
text.setAttribute('y',`${point.y.toString()}`);
text.setAttribute('fill','white');
text.textContent='31.13';
textGroup.appendChild(text);
// create foreign object => g > foreignObject
const foGroup = document.createElementNS(svgns,'g');
foGroup.setAttribute('class','foreignObjectElement');
bound.appendChild(foGroup);
const fo = document.createElementNS(svgns, 'foreignObject')
fo.setAttribute("xmlns", 'http://www.w3.org/1999/xhtml');
fo.setAttribute('class','fo');
fo.setAttribute('x',`${point.x.toString()}`);
fo.setAttribute('y',`${point.y.toString()}`);
fo.setAttribute("width", "40");
fo.setAttribute("height", "40");
foGroup.appendChild(fo);
//div inside foreign object ==> g > foreignObject > div
const div = document.createElement('div');
div.setAttribute("xmlns", 'http://www.w3.org/1999/xhtml');
fo.appendChild(div);
//span inside div ==> g > foreignObject > div > span
const span = document.createElement('span');
span.setAttribute('class','pop');
span.style.setProperty('height','auto');
span.style.setProperty('width','auto');
span.style.setProperty('background-color', '#555');
span.style.setProperty('color', '#fff');
span.style.setProperty('text-align', 'center');
span.style.setProperty('border-radius', '6px');
span.style.setProperty('padding', '8px 0');
span.style.setProperty('position', 'absolute');
span.textContent = '31.13';
div.appendChild(span);div > span::after {
content: "";
position: absolute;
bottom: 0;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>-->
<body>
<div id="container"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="green" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1020" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="valLine">
<path id="valLine" d="M0,600L42.5,600L85,334.0399725781784L127.5,313.86735572781834L212.5,222.9985644559286L255,222.9985644559286L297.5,248.66379557852153L340,248.66379557852153L382.5,248.66379557852153L425,171.66810221073513L467.5,171.66810221073513L510,146.00287108814229L552.5,248.66379557852153L595,248.66379557852153L637.5,248.66379557852153L680,197.33333333333186L722.5,197.33333333333186L765,171.66810221073513L807.5,94.67240884294881L850,94.67240884294881L892.5,94.67240884294881L935,25.495262704563594L977.5,25.495262704563594L1020,0" stroke="black" fill="none"></path>
</g>
</g>
</svg>
</svg>
</body>
<script src="prod.js" type="text/javascript"></script>
</html>我最初的假设是创建一个SVG Point到101，并将x和y分配给foreignObject，不幸的是，这对104不起作用，但对svg 105非常有效.
通过为svg text元素指定相同的坐标，我可以将其放置在所需的位置.
换言之，如何以编程方式将100定位在与svg 101完全相同的位置？