Question

我使用SVG创建了一个多边形/三角形，但是我不知道如何执行以下操作：

1）有9度角/倾斜

2）在浏览器调整大小时保持纵横比。（宽度100％）

这是SVG代码：

<svg preserveAspectRatio="none" viewBox="0 0 25 10">
  <polygon points="0,10 40,0 25, 10 0" />
</svg>

这是Codepen：

http://codepen.io/anon/pen/VeNyQN

谢谢！

Answer 1

你的问题并不完全清楚，但我猜你只是想在你的页面上插入一个顶边有9度斜率的三角形？当页面宽度增加时，它是否保持9度斜率？是吗？

如果是这样，您不想使用preserveAspectRatio="none"。这会破坏纵横比并导致SVG伸展。

首先，我们需要弄清楚9deg斜率对应的内容。

tan(9) = Opposite-side / Adjacent-side


              _____-----+
    _____-----          |  opposite
._9deg__________________|
         adjacent

tan(9) ~= 0.1584

这意味着三角形100宽，相反的高度是15.84。

所以我们的SVG需要如下所示：

<svg width="100%" viewBox="0 0 100 15.84">
  <polygon points="0,15.84 100,15.84 100 0" />
</svg>

创建一个9度斜率的SVG

1 个答案: