在 svg 中使用“原生标签”相对于foreignObject 的优势

Question

我创建了 stackoverflow-readme-profile 项目，该项目将个性化的 Stackoverflow 个人资料创建为 svg 图像。我花了很多时间使用“原生 svg 标签”来构建它，如下所示：

<svg version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style="overflow: visible;">
  <rect width="300" height="80" rx="5" ry="5" fill="orange"></rect> 
  <rect width="140" height="40" x="10" y="20" fill="yellow"></rect> 
  <rect width="140" height="40" x="150" y="20" fill="blue"></rect> 
</svg>

➜JSFiddle

使用

<foreignObject>

标签，我可以使用方便的 css 属性，例如

flexbox

对齐方式：

<svg version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" style="overflow: visible;">
  <foreignObject width="300" height="80">
    <div style="width: 100%; height:100%; border-radius: 5px; background: orange; display: flex; padding: 20px 10px; box-sizing: border-box;">
      <div style="width: 100%; background: yellow;"></div>
      <div style="width: 100%; background: blue;"></div>
    </div>
  </foreignObject>
</svg>

➜JSFiddle

使用“原生”svg 真的有优势吗？还是我浪费了大量时间？

Answer 1

这两个选项都可用，因为它们都是需要/有用的。对于任意布局文本（例如工具提示），我更喜欢

foreignObject

。对于图形标签和图例，文本应与 SVG 中的形状/路径对齐，在这种情况下

foreignObject

没有任何意义。