SVG абстрактные формы отзывчивые

Question

Так что я могу сделать следующий путь, но мне нужна форма, перевернутая так, что плоская соединительная линия (X) находится внизу. Я также нуждаюсь в этом, чтобы растянуть всю ширину его контейнера.

<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

Что касается переворачивания фигуры, вы можете использовать преобразование на пути, масштабируя ось y на -1. Это перевернет форму и «выйдет» из вида, поэтому вам также нужно будет ее перевести. Если вы хотите, чтобы он заканчивался точно такими же верхними и нижними границами, что и предварительно перевернутый (в отличие от, скажем, в нижней части контейнера и т. Д.), Тогда вы должны перевести его на высоту формы, т.е. 50 пикселей в вашем примере.

Что касается желаемого растяжения до полной ширины контейнера, код в вашем вопросе уже содержит ответ, то есть width="100%". Это показано, помещая треугольник в div шириной 250 пикселей. Сравните это с оригинальной формой (слева) шириной 100 не 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>