如何解决SVG矢量文字笔画未“完成”
为什么矢量文字上的笔画在某些字母角上没有完成?我在Illustrator中以1px的笔触制作了此SVG,并以图片的形式显示了该图片。我尝试使用不同的字体,但是仍然遇到相同的问题。我还尝试了vector-effect:non-scaling-stroke;这帮助了一点。我测试了不同的笔划偏移量,但也没有运气。
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。