使用SVG使诊断线在垂直方向上变平

Question

我的符号类似于字母“V”。 “V”的终点是倾斜的，如下图左侧图所示。但是，我希望它们在水平方向上展平，如右下图所示。我怎么能这样做？

我的SVG代码如下所示：

<svg width="120" height="120" viewPort="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <polyline points="30,30 60,90 90,30" fill="none" stroke="black" stroke-width="25" />
</svg>

我目前的形象。 。 。 。 。 。 。想要的图像

Answer 1

创建所需形状的正确方法是使用polygon或path元素并填充它。

方法1 - 多边形：

SVG的polygon元素采用单个参数，即points，其中包含一个点列表。然后通过连接所有这些点并填充它们来创建一个形状。

这是必要的代码：

<polygon points="15,30 40,30 60,70 80,30 105,30 60,120" />

工作示例：

＆＃13;

＆＃13;

<svg width="120" height="120" viewPort="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <polygon points="15,30 40,30 60,70 80,30 105,30 60,120" />
</svg>

＆＃13;

＆＃13;

＆＃13;

方法2 - 路径：

SVG＆＃39; path元素只需要一个必需属性，即d。该属性包含一系列命令和用于描述形状的相应参数。

这是必要的代码：

<path d="M15,30 h25 L60,70 80,30 h25 L60,120 z" />

工作示例：

＆＃13;

＆＃13;

<svg width="120" height="120" viewPort="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <path d="M15,30 h25 L60,70 80,30 h25 L60,120 z" />
</svg>

＆＃13;

＆＃13;

＆＃13;

<强>结果：