SwiftUI中如何实现多层SVG的调色板式着色渲染？

你的问题出在SVG的颜色定义上：所有元素都用了currentColor作为颜色值，而SwiftUI的.symbolRenderingMode(.palette)需要不同的颜色占位符来区分分层着色的目标元素，currentColor会被识别为同一个占位符，所以所有元素都被应用了调色板里的第一个颜色（红色）。

修改SVG的方法很简单，给需要区分颜色的层设置不同的固定原始颜色，不要用currentColor：

修改后的SVG代码 #

<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg">

<g id="layer-circle">
  <circle cx="25" cy="24.5" r="24.5" fill="#000000"/>
</g>

<g id="layer-paths">
  <path d="..." stroke="#FFFFFF" stroke-width="2"/>
  <path d="..." stroke="#FFFFFF" stroke-width="2"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="..." fill="#FFFFFF"/>
</g>
</svg>

原理说明 #

SwiftUI的.palette模式会按照SVG中原始颜色出现的顺序，将foregroundStyle里的颜色依次替换上去：

• 第一个出现的原始颜色（这里的黑色#000000）会被替换为.red
• 第二个出现的原始颜色（这里的白色#FFFFFF）会被替换为.yellow

这样就能实现圆形显示红色、路径显示黄色的预期效果。如果后续需要更多分层着色，只要给对应层设置新的唯一原始颜色，再在foregroundStyle里追加对应颜色即可。

内容的提问来源于stack exchange，提问作者zdtorok