How to scale a polygon svg with an image fill to the container's height?

Question

I'd like to scale an SVG with a polygon shape to the full height of the container. Setting the SVG's height to 100% wouldn't work.

Relevant jsFiddle: https://jsfiddle.net/12yktprj/

Following line is causing me trouble:

aside svg {
    height: 100%; /* somehow not working */
    width: 100%;  /* somehow not working */
}

score 0 · Answer 1 · answered Mar 26 '19 at 07:39

The svg element need to have a viewBox attribute and no width and height. For the viewBox attribute I'm taking the size of the polygon.

Also in this case (flex-direction:row - the default) instead of declaring the width of the flex items I'm declaring the [flex property]

The aside has position:relative; and the svg has position:absolute; and overflows the aside. I hope this is what you were asking.

(https://developer.mozilla.org/en-US/docs/Web/CSS/flex)

*{padding:0,margin:0}
body {
  height: 300px;
  width: 900px;
  border: 3px solid green;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position:relative;
  background:#ddd;
}

aside {
  position:relative;
  flex: 1 1 25%;
  height: 100%;
  border: 1px solid blue;
}

aside svg {
  position:absolute;
  height:100%
}

article {
  border: 2px solid orange;
  flex: 1 1 75%;
  height: 100%;
  padding: 2px;
}

<body>
  <aside>
    <svg viewBox="0 0 100 100">
      <defs>
          <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
              <image height="1" preserveAspectRatio="slice" xlink:href="https://i.imgur.com/8OtgM8B.jpg" />
          </pattern>
      </defs>
      <polygon fill="url(#pattern1)" points="0,0 70,0 100,100 0,100"/>
    </svg>
  </aside>
  <article>
    <h1>Title</h1>
    <p>Sample Text</p>
  </article>
</body>

How to scale a polygon svg with an image fill to the container's height?

1 Answers1