CODEWITHSUNDEEP
htmlcsssvg
archvist
archvist

Reputation: 722

Expand SVG shape height to match content

I've created an SVG shape which will contain various text based content, ranging between 1 - 8 lines. I've created my shape and content, but I'm using a position:absolute; rule to pull the content into the SVG. Which means if I add more content the shape won't expand.

Is this possible using an SVG element, I'm looked at using the text tag but it seems that the text is broken into single lines, and drawn at a specific x,y which I don't believe will work in my case.

    <div class="wrp">
<svg viewBox="0 0 1416 200">
    <path d="M1337.59107,-1.0658141e-14 L0,-1.0658141e-14 L0,325 L1027.36348,325 L1337.59107,-3.90798505e-14 Z" id="Combined-Shape" stroke="none" fill="#9DC8F2" fill-rule="evenodd"></path>
</svg>
<div class="img-wrp">
  <img src="https://www.maxizoo.fr/wp-content/uploads/2016/06/aliments-hamster.jpg" alt="">
</div>
<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="caption-wrp">
        <div class="item">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales, odio ut egestas egestas, orci neque interdum sem, at malesuada enim tellus eget dui.
          </p>
          <span>Name</span>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

This is how I'm pulling the content;

.caption-wrp{
  padding:0px 50px;
  text-align: center;
  position: absolute;
  top: -100px;
  z-index: 999;
  color: #fff;
}

JSFiddle - https://jsfiddle.net/783ob55u/2/

Everything I read about SVG (view box) suggests its drawn to a fix size.

Edit - Example of what I'm trying to achieve (not the content size will change) - enter image description here

Upvotes: 0

Views: 760

Answers (2)

antoni
antoni

Reputation: 5546

I have attempted another solution for you, if I understand well it should be a good base to get what you want. The image is not perfectly fitted for that purpose so you may want to either find another one or have a set of 2 images to toggle with media queries.

Have a look here: http://codepen.io/anon/pen/JWyeQN

.box {
  position: relative;
  margin-top: 10%;
  padding: 1.5em 20% 1.5em 1em;
  background-color: #69f;
  overflow: hidden;
}
.right-corner {
  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS7XbUc4oQQ0d0Ig4DvKipwx81Jk2B6FTsD7iyZCMS6tHBhHEQ7) no-repeat right top;
  background-size: cover;
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
svg {
  height: 100%;
  width: auto;
  position: absolute;
  top: 0;
  left: 0;
}
polygon {
  fill:#69f;
}

The whole wrapper is responsive and the text block also and the right border will always cover 100% height of the container.

Let me know if something is not very clear.

Hope it helps!

Upvotes: 1

Begmuhammet Kakabayev
Begmuhammet Kakabayev

Reputation: 310

I think you should position you images as position: absolute; and let the text to take it's actual height. Look at this example that I made for you.

jsFiddle

Upvotes: 1

Related Questions