CODEWITHSUNDEEP
htmlcsssvg
William Stinson
William Stinson

Reputation: 119

Absolute positioning of svg element not working

I have tried to set an svg line so it would strikethrough the screen on all devices. On mobile devices, and computers with smaller screens, the line gets cut off, like the bottom example in my image.

enter image description here

I have tried to set the <svg> element to have an absolute position, but just putting it inside a <div> changes it, without even giving that div any css styling. Any suggestions?

Fiddle here

Upvotes: 8

Views: 33771

Answers (1)

Susanne Peng
Susanne Peng

Reputation: 887

You need to wrap the svg element in a div (.svg-container) that is absolutely positioned inside the main area (.sec1) you want it to "strike through". The main area then needs to have a relative position applied to it so that the wrapper div knows where to position itself relative to:

.sec1 {
  position: relative;
}

.svg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.maintitlesection {
  position: absolute;
  width: 300px;
  right: 30px;
}
<div class="sec1">
  <div class="svg-container">
    <svg height='100%' width='100%' xmlns='http://www.w3.org/2000/svg'>
        <line stroke='#5AB1BB' stroke-width='2' x1='0' x2='10000' y1='0' y2='10000'></line></svg>
  </div>
  <div class="w3-container">
    <div class="maintitlesection">
      <div class="title">
        William Stinson
      </div>
      <p>Computers, graphics, photo and video (and lots more).</p>
    </div>
  </div>
</div>

Upvotes: 21

Related Questions