CSS 绘制顺序属性的 SVG 问题答案

【问题标题】：SVG issues with the CSS paint-order attributeCSS 绘制顺序属性的 SVG 问题
【发布时间】：2019-01-14 21:54:02
【问题描述】：

在 HTML 画布上设计产品后（供参考使用 fabricjs 构建），画布被导出为 SVG。选项之一是添加文本并设置样式。当您给文本一个笔划并导出时，我一直遇到画布输出和 svg 输出之间的渲染问题（见下图）。

经过一些研究，我发现这部分是问题paint-order="stroke"，显然并非所有浏览器或 svg 查看器都支持。有谁知道如何使这项工作（最好在任何地方）。

【问题讨论】：

标签： css svg

【解决方案1】：

不知何故，您必须将路径绘制两次，首先是描边，然后是填充。

这可以通过插入路径两次（第一次没有填充，然后没有描边）或通过在<defs> 元素中定义路径然后通过<use> 元素插入两次来完成。

这是一个添加两次路径的示例：

body {
  background: grey;
}

<svg width="200" height="200" viewBox="0 0 200 200" >
  <path  stroke="white" stroke-width="20" d="M50 50 h 100 v 100 h -100 v -100z" />
  <path fill="green" d="M50 50 h 100 v 100 h -100 v -100z" />
</svg>

下面是一个<defs> 元素中的路径示例：

body {
  background: grey;
}

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200" >
  <defs>
    <path id="path1" d="M50 50 h 100 v 100 h -100 v -100z"/>
  </defs>
  <use stroke="white" stroke-width="20" xlink:href="#path1" />
  <use fill="green" xlink:href="#path1" />  
</svg>

【讨论】：