如何添加svg多边形三角形内联？

Question

我尝试添加四个svg多边形三角形内联。但我不能这样做。有谁可以帮助我？

这是我试过的代码。

<svg viewBox = "0 0 500 500">   
    <polygon points="195,140 245,210 140,210" style="fill:red;"></polygon>
    <polygon points="195,140 245,210 140,210" style="fill:red;"></polygon>
    <polygon points="195,140 245,210 140,210" style="fill:red;"></polygon>
    <polygon points="195,140 245,210 140,210" style="fill:red;"></polygon>
</svg>

这是我要创建的图像。

Answer 1

你实际上有4个三角形，但将它们全部放在同一个地方。

修改您的积分，例如：

<svg viewBox = "0 0 500 500">   
    <polygon points="195,140 245,210 140,210" style="fill:red;"></polygon>
    <polygon points="295,140 345,210 240,210" style="fill:red;"></polygon>
    <polygon points="395,140 445,210 340,210" style="fill:red;"></polygon>
    <polygon points="495,140 545,210 440,210" style="fill:red;"></polygon>
</svg>

演示： https://jsfiddle.net/Paf_Sebastien/rn9wtzjf/