SVG矢量文字笔画未“完成”

问题描述

为什么矢量文字上的笔画在某些字母角上没有完成？我在Illustrator中以1px的笔触制作了此SVG，并以图片的形式显示了该图片。我尝试使用不同的字体，但是仍然遇到相同的问题。我还尝试了vector-effect：non-scaling-stroke;这帮助了一点。我测试了不同的笔划偏移量，但也没有运气。

here is an example

path{
stroke-dasharray:500;
opacity:10;
stroke:#000;
animation: animate 4s cubic-bezier(.69,.71,.69,.71);
}

@keyframes animate{
    
    0%{

        opacity=0;
    stroke-dashoffset:500;
    }
    
20%{

        opacity=0;
    stroke-dashoffset:500;
    }
    

        100%{
        opacity:10;
    stroke-dashoffset:0;
    
    }
    
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 363.5 122.5" style="enable-background:new 0 0 363.5 122.5;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#AF174A;}
    .st1{stroke:#000000;stroke-miterlimit:10;}
</style>
<polygon class="st0" points="189.6,-14.4 189.5,-14.5 189.5,-14.4 "/>
<g>
    <path class="st1" d="M121.9,104.7l-18.1-17.8v17.8h-1.1V67.4h1.1v17.9l18.1-17.9h1.4l-18.9,18.7l18.9,18.7H121.9z"/>
    <path class="st1" d="M148.7,67.4v1h-17.2v17.2h15.6v1h-15.6v17.2h17.2v1h-18.2V67.4H148.7z"/>
    <path class="st1" d="M164.8,104.7l-10-37.3h1.2l9.4,35.2l10.9-35.2h1.2l11,35.4l9.4-35.4h1.2l-10,37.3h-1.1l-11.1-35.6l-11.1,35.6
        H164.8z"/>
    <path class="st1" d="M225.2,67.4v1H208v17.2h15.6v1H208v17.2h17.2v1H207V67.4H225.2z"/>
    <path class="st1" d="M258.2,67.5h1.1v37.3h-1.1L235,69.4v35.3h-1.1V67.5h1.1l23.2,35.3V67.5z"/>
</g>
</svg>

解决方法

您对我不太确定的SVG规范的细节感到困惑。它是错误还是功能？自己决定。

您使用的路径以 closepath 命令d结束其z属性。 spec清楚地表明，无论是否使用closepath，在该路径终点处的笔触行为都不同：

当子路径以“ closepath”结尾时，其行为与通过“ lineto”命令“手动”关闭子路径时所发生的行为不同，它们是如何实现stroke-linejoin和stroke-linecap的。使用“ closepath”时，使用stroke-linejoin的当前值，将子路径的最后一段的结尾与子路径的初始段的起点“连接”。如果您改为通过“ lineto”命令“手动”关闭子路径，则不会合并第一段的开头和最后一段的结尾，而是使用stroke-linecap的当前值来分别设置上限。>

在下面的示例中，您可以比较关闭或不关闭路径的效果。

path {
    fill: none;
    stroke: black;
    stroke-width: 20;
}

<svg viewBox="0 0 300 100">
    <path d="M20 20 H 80 V 80 H 20 V 20" />
    <path d="M120 20 H 180 V 80 H 120 z" />
</svg>

stroke-linecap的默认值为butt，这意味着笔触仅垂直于笔划的末端结束。因此，在不闭合路径的情况下，在外角处仍然存在间隙，如果应用线连接，则该间隙会绘制斜接。

现在，您的代码具有 closepath命令。为什么最后的斜接仍然没有画出来？您必须仔细阅读spec的虚线绘制算法。在计算破折号的位置时，会说

位置

将索引设置为（索引+ 1）mod计数。

让短划线长度为最小值（短划线_index，路径长度-位置）。

如果索引mod 2 = 0，则将位置添加到位置。

将位置设置为位置+长度。

不。 2表示，最后一个破折号总是在路径的前面或结尾结束，并且永远不会过冲。作为一种算法，这很有意义。但是规范还指出，每个破折号的开始和结束都由stroke-linecap定义的顶盖形状。

让位置作为子路径的破折号。

对于每对在以下位置：（...）

将破折号设置为破折号与位置开始处子路径的起始帽形的并集。

将破折号设置为破折号与位置末尾子路径的端帽形状的并集。

让索引和最后一个为子路径中沿子路径起点和终点的路径段的索引。

索引为

将dash设置为dash的并集，并将其设为段索引index处子路径的直线连接形状。

将索引设置为索引+ 1。

在特殊情况下，它没有提到闭合路径的开始和结束。 Linejoin的形状仅在虚线内绘制，但始终在其末端绘制 cap 形状，从不绘制 join 形状。 >

这将回答者引向this question来建议stroke-linecap: square的用法。只要路径的第一段和最后一段相交垂直，此方法就可以很好地工作。但是，如果还有其他角度（如字母K和W一样），您仍然会得到不正确的结果。值round看起来很平滑，但也不同于其他线连接上的斜接效果。

path {
    fill: none;
    stroke: black;
    stroke-width: 20;
    stroke-dasharray: 250;
    stroke-linecap: square;
}
.smoothed {
   stroke-linecap: round;
}

<svg viewBox="0 0 300 100">
    <path d="M20 20 H 80 V 80 H 20 z" />
    <path d="M120 20 H 180 V 80 H 140 z" />
    <path d="M220 20 H 280 V 80 H 240 z" class="smoothed" />
</svg>

html path path stroke svg

SVG矢量文字笔画未“完成”

问题描述

解决方法

相关问答