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。这会将形状翻转并“看不见”，因此您还需要将其翻译下来。如果你希望它的上边界和下边界与预先翻转的边界完全相同（相对于它的容器底部等），那么你必须将它翻译成形状的高度，即你的例子中为50px。

想要将其拉伸至其容器的整个宽度，问题中的代码已包含答案，即width="100%"。这是通过将三角形放置为宽度为250px的div来显示的。将其与原始形状（左侧）对比，宽度为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>