SVG abstract shapes responsive -


so can make following path, need shape flipped flat joining line (x) on bottom. need stretch full width of container.

<svg id="bigtrianglecolor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewbox="0 0 100 102" preserveaspectratio="none"> <path d="m0 0 l30 50 l100 0 z"></path> </svg> 

with respect flipping shape, can use transform on path, scaling y-axis -1. flip shape , "out" of view, need translate down. if want end same upper , lower boundaries pre-flipped (as opposed to, say, @ bottom of container, etc.) have translate down height of shape, i.e. 50px in example.

with respect wanting stretched full width of container, code in question contains answer, i.e. width="100%". shown placing triangle div 250px wide. contrast original shape (on left) width of 100 not 100%.

div {    width: 250px;    height: 70px;    border: solid red 2px;  }
original: unflipped, untranslated, unstretched:  <div>    <svg id="bigtrianglecolor2" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewbox="0 0 100 102" preserveaspectratio="none">      <path transform="translate(0, 0) scale(1, 1)" d="m0 0 l30 50 l100 0 z"></path>    </svg>  </div>    altered: flipped, translated, stretched:  <div>    <svg id="bigtrianglecolor1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewbox="0 0 100 102" preserveaspectratio="none">      <path transform="translate(0, 50) scale(1, -1)" d="m0 0 l30 50 l100 0 z"></path>    </svg>  </div>


Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -