CODEWITHSUNDEEP
htmlcsssvg
user32882
user32882

Reputation: 5875

Start svg polyline exactly at right border of span element

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?

Upvotes: 0

Views: 181

Answers (1)

enxaneta
enxaneta

Reputation: 33054

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>

Upvotes: 2

Related Questions