SVG abstract shapes responsive - svg

Question

So I can make the following path, but I need the shape flipped so that the flat joining line (X) is on the bottom. I also need it to stretch the full width of its 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>

Answer 1

With respect to flipping the shape, you can use a transform on the path, scaling the y-axis by -1. This will flip the shape up and "out" of view, so you also need to translate it down. If you want it to end up with exactly the same upper and lower boundaries as pre-flipped (as opposed to, say, at the bottom of its container, etc.) then you have to translate it down by the height of the shape, i.e. 50px in your example.
With respect to wanting it stretched to the full width of its container, the code in your question already contains the answer, i.e. width="100%". This is shown by placing the triangle into a div that is 250px wide. Contrast this with the original shape (on the left) with 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>