Start svg polyline exactly at right border of span element - html

Question

I have a simple html file containing an SVG polyline:
Here's my code:
span {
border: 1px solid red;
}
polyline{
fill:none;
stroke:red;
stroke-width:3
}
<p>A block element containing an <span>inline element</span></p>
<svg height="200" width="500">
<polyline points="0,0 20,0 40,25" />
</svg>
I would like to start the polyline exactly at the midpoint of my span's right border. How can I do that?

Answer 1

This is a very basic idea: you give the svg position:absolute and the same size as the html element overlapped. You calculate the bounding client rect of the span and the position of the point where the polyline shpuld begin. Ypu either translate the polyline or you rewrite the points attribute so that it begins where you want it
let bcr = sp.getBoundingClientRect();
poly.setAttribute("transform",`translate(${bcr.x+bcr.width},${bcr.y+bcr.height/2})`)
svg {
outline: solid;
position: absolute;
top:0;left:0;
}
div {
width: 500px;
height: 200px;
}
span {
border: 1px solid red;
}
polyline {
fill: none;
stroke: red;
stroke-width: 3;
}
<div>
<p>A block element containing an <span id="sp">inline element</span></p>
</div>
<svg height="200" width="500">
<polyline id="poly" points="0,0 20,0 40,25" />
</svg>