Question

.fancybox-layout6 .cshero-fancybox-effect svg path {
    stroke: #da1527;
    fill: #FFF;
    stroke-width: 8px;
}

<svg style="fill: #222;" height="60px" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0" stroke-width="0"></path>
</svg>

我有一个SVG三角形，并将其旋转到90度，我添加了笔触，笔触宽度，但是我的问题是当我添加笔触线联接时，它将无法工作

Answer 1

我想您错过的是stroke属性。所以我加了stroke="black"。 stroke-linejoin="round"可以在SVG本身或CSS中添加。到目前为止，我已经在CSS中添加了它

.fancybox-layout6 .cshero-fancybox-effect svg path {
    stroke: #da1527;
    fill: #FFF;
    stroke-width: 8px;
    stroke-linejoin: round;
}

<svg style="fill: #222;" height="60px" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0" stroke="black"
    ></path>
</svg>

Answer 2

您的问题是您的路径正好到达SVG的边缘。

添加笔触宽度和线连接时，它们会溢出SVG的边缘，并被切除。

如果我们解压您的SVG，请添加蓝色边框以显示SVG的边界，然后打开溢出按钮，这应该清楚发生了什么。

svg path {
    stroke: #da1527;
    fill: #FFF;
    stroke-width: 8px;
}

svg {
  width: 200px;
  height: 200px;
  border: dashed 1px blue;
  overflow: visible;
}

<svg viewBox="0 0 100 100">
<path d="M0 0 L50 100 L100 0" stroke-width="0"></path>
</svg>

要解决此问题，您将必须：

减小三角形的路径，以使笔划结合起来，并且笔盖适合您的viewBox边界，或者
增大您的viewBox，以了解上限和加入次数。

在下面的示例中，我选择了“调整视图框”方法。

svg path {
    stroke: #da1527;
    fill: #FFF;
    stroke-width: 8px;
}

svg {
background: linen;
}

<svg style="fill: #222;" height="60px" preserveAspectRatio="none" version="1.1" viewBox="-4 -5 108 116" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0" stroke-width="0"></path>
</svg>

如何使svg路径指向？

2 个答案: