Svg is stuck behind the image

HTML & CSS
1

How do I fix it so that the svg is in front of the image?

I can’t figure this out, and this is something I’ve done before, so I’m not sure why it’s not working here.

          <div class="playButton wrapd">
            <div class="img"></div>
            
            <svg class="stack" aria-hidden="true"  width="260" height="194" viewbox="0 0 260 194">
              <line x1="131" y1="40" x2="131" y2="74"></line>
              <line x1="147" y1="80" x2="171" y2="57"></line>
              <line x1="186" y1="96" x2="153" y2="95.8"></line>
              <line x1="169" y1="135" x2="145" y2="110"></line>
              <line x1="130.3" y1="118" x2="130" y2="150"></line>
              <line x1="115" y1="110" x2="91" y2="133"></line>
              <line x1="108" y1="95.3" x2="76" y2="95"></line>
              <line x1="93" y1="56" x2="115.2" y2="79"></line>
              <circle class="outer" cx="131" cy="95" r="55"></circle>
              <circle cx="130" cy="95.40" r="20.8"></circle>
            </svg>
2

Fixed

This was missing
position: relative;

.wrapd .stack {
  position: relative;
  stroke: #5F6A98;
  stroke-width: 5;
  fill: transparent;
  vertical-align: top;
}
3 
<svg 
  class="stack" 
  aria-hidden="true" 
  width="260" height="194" 
  viewbox="0 0 260 194"
>
...
</svg>

I am pleased you found a solution and may I suggest trying to remove the fixed SVG dimensions and applying the width and height to the parent container.

Reason for the suggestion is that SVG is designed to expand and contract to the parent container and to retain sharpness at all dimensions.

This is ideal for responsive layouts on all platforms such as mobiles, tablets, desktops, etc and does not require any additional CSS to cater for different platforms.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.