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。这将使形状翻转并且出现＆＃34; out＆＃34;视图，所以你还需要翻译它。如果你希望它最终具有与预翻转完全相同的上边界和下边界（相反，例如，在其容器的底部等），那么你必须将其向下平移形状的高度，即你的例子中50px。

关于希望它扩展到其容器的整个宽度，问题中的代码已经包含答案，即width="100%"。通过将三角形放入250px宽的div来显示。将其与原始形状（左侧）进行对比，宽度为100而不是100%。

＆＃13;

div {
  width: 250px;
  height: 70px;
  border: solid red 2px;
}

＆＃13;

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>

＆＃13;

SVG抽象形状响应

1 个答案: