Sketch里画的一个圆形被切割后,边框类型设成了“内侧(Inside)”,线帽设成了圆角。画布上预览一切正常,导出SVG之后圆角线帽消失了,直线变成了直角。
Sketch官方在论坛里确认了这是SVG输出格式的已知限制:SVG规范本身对内侧边框的支持就不完整,Sketch导出时把边框转换成路径,转换过程中圆角线帽的属性被丢弃了。半透明的内侧边框问题更严重,因为Sketch能在画布上把半透明边框和底下的填充色混合出最终颜色,但SVG导出做不到这种混合。
一个经过验证的规避方式是:给需要导出的路径重新加一个边框。 选中形状,删掉原来的内侧边框,在Inspector里重新添加一个边框。Sketch会自动把它设为中心对齐的边框(Center),中心边框在SVG里的兼容性最好,圆角和线帽都能保留下来。
如果边框是半透明的,还有一个取巧的办法:用吸管工具(按Ctrl+C激活)直接从画布上吸取内侧边框区域最终显示的颜色。Sketch会把边框和填充混合后的颜色赋值给边框,同时把不透明度自动设为100%。这样导出SVG时,边框是一个不透明的纯色,不需要透明度混合,导出结果就和画布上看到的一致了。
预览中的照片/图标/矢量图等通常并不包含,部分字体需要软件支持 OpenType。版权归原作者,仅供个人学习参考,请勿直接商用。详见协议。

