0

Here I want to add a pseudo-element to the SVG path. I had tried :after element is shown in the console but not visible. Here I want to add a pseudo-class to the middle of the SVG path. Can anyone suggest to me how can I achieve this output. Is it possible if not then what will be the alternate way. Any kind of help will be appreciated.

.container{
  width: 500px;
  margin:50px auto;
  position:relative;
  text-align:center;
}

.test {
    position: relative;
}
.test:after {
    content: '';
    display: block;
    position: absolute;
        top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: red;
    z-index: 999999;
}
<div class='container'>
  <svg height="400" width="500">
    <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
    stroke-width="3" fill="none" />
    <path id="lineBC" class="test" d="M 250 50 l 150 300" stroke="red"
    stroke-width="3" fill="none" />
    <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
    fill="none" />
    <path d="M 100 350 q 150 -300 300 0" stroke="blue"
    stroke-width="5" fill="none" />
  </svg>
 
</div>
Husna
  • 1,286
  • 4
  • 19
  • 48
  • Does a ``marker-mid`` marker help? https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker – Danny '365CSI' Engelman Nov 18 '20 at 15:45
  • 2
    SVG does not support pseudo elements. – Robert Longson Nov 18 '20 at 16:07
  • As an alternative solution you will need to calculate the position of the center of the path and add a circle (or the shape you want) with the center in this point. 1. You will need the total length of the path: `let length = thePath.getTotalLength();`.2. Next you can calculate the position of the center: `let center = thePath.getPointAtLength(length/2);` 3. supposing that you have a circle element `` you can set the values for the cx and cy: `circle.setAttribute("cx", center.x); circle.setAttribute("cy", center.y);` – enxaneta Nov 18 '20 at 16:57
  • Yet another solution if you want to avoid using JavaScript. Supposing that the path has an id="thePath" you can add a bullet in the middle of the path by adding a text element: ` • ` Please observe that startOffset="50%"`` – enxaneta Nov 18 '20 at 17:08

0 Answers0