為什么 SVGR 工具將 SVG 的兩條具有相同填充顏色的路徑組合為單個路徑而不是單獨的路徑？有沒有辦法避免這種情況？
<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#232323" d="M425.5 52C419 52 413.75 57.25 413.75 63.75C413.75 70.25 419 75.5 425.5 75.5C432 75.5 437.25 70.25 437.25 63.75C437.25 57.25 431.75 52 425.5 52ZM425.5 73.25C420.5 73.25 416.25 69 416.25 63.75C416.25 58.5 420.5 54.25 425.5 54.25C430.5 54.25 434.75 58.5 434.75 63.75C434.75 69 430.5 73.25 425.5 73.25Z" />
<path fill="#E24B4B" d="M425.5 52C419 52 413.75 57.25 413.75 63.75C413.75 70.25 419 75.5 425.5 75.5C432 75.5 437.25 70.25 437.25 63.75C437.25 57.25 431.75 52 425.5 52ZM425.5 73.25C420.5 73.25 416.25 69 416.25 63.75C416.25 58.5 420.5 54.25 425.5 54.25C430.5 54.25 434.75 58.5 434.75 63.75C434.75 69 430.5 73.25 425.5 73.25Z" />
<path fill="#E24B4B" d="M308.5 432.75C303.75 432.75 300 436.5 300 441.25C300 446 303.75 449.75 308.5 449.75C313.25 449.75 317 446 317 441.25C317 436.75 313.25 432.75 308.5 432.75ZM308.5 447.5C305.25 447.5 302.5 444.75 302.5 441.25C302.5 437.75 305.25 435 308.5 435C311.75 435 314.5 437.75 314.5 441.25C314.5 444.75 311.75 447.5 308.5 447.5Z" />
<defs>
<clipPath id="clip0_17059_14713">
<rect width="450" height="400" fill="white" transform="translate(22.5 50)"/>
</clipPath>
</defs>
</svg>
uj5u.com熱心網友回復：
SVGR 呼叫 SVGO 作為其轉換的一部分。合并路徑的是 SVO。
所以你可以
- 完全停止呼叫 SVGO，即使用--no-svgo 運行 SVGR
- 阻止 SVGO 合并路徑。使用 --svgo-config 提供 SVGO 組態檔，然后配置 SVGO 以禁用每個https://github.com/svg/svgo#configuration的合并路徑，即
module.exports = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
// disable plugin
mergePaths: false,
},
},
},
],
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516170.html
上一篇：如何圍繞其軸旋轉svg組件
下一篇：如何更改img標簽內的svg顏色