问题 #6318💬 已回答提出于 2024年11月20日作者 tonypapousek3 个反应

无法在Block media svg中使用透明填充

快速解答作者 samex❤ 1

我认为这取决于具体使用的SVG。如果你检查其他SVG图标，你会发现它们主标签上没有填充属性（内联），<svg>而是在子<path>标签上。通过在该SVG的两个元素上设置fill=“none”属性<path>，图标应该会正确显示。希望这些建议能帮你解决这个问题！

阅读下方完整回答 ↓

问题

GrapesJS 版本[X] 我确认使用最新版本 [email protected] 本问题提交时间你用的是什么浏览器？ Firefox 132，Chrome 131可复制演示链接 https://jsfiddle.net/x54f9v68/1/描述一下那个虫子如何复现这个漏洞？添加一个自定义方块， media 属性设置为带有透明填充的SVG查看方块标签，然后注意填充会自动设置为 currentColor 预期的行为是什么？填充应该是透明的 ![截图 2024-11-20 10 38 00]（https://github.com/user-attachments/assets/4e1b546c-9b65-47ec-bafe-4354552d0f5b）目前的行为是什么？填充继承currentColor，错误地渲染图标 ![截图 2024-11-20 10 24 36]（https://github.com/user-attachments/assets/d4fe2857-d4b1-42e8-8fba-19d211a36cbe）看起来 fill 在某些地方设置成 currentColor ，但我觉得[这行]（https://github.com/GrapesJS/grapesjs/blob/36572c38033022cbf259d4e37fde507f60a...

回答（4）

samex• 2024年11月21日

tonypapousek• 2024年11月22日

@samex 指定“fill=”none“后解决了问题，谢谢！这肯定能让我的自定义内容更可预测地工作。

除此之外，我觉得主要的痛点是尝试使用第三方SVG（比如“反应图标”）或所见即所得输出，但这些输出没有明确设置“填充”属性。考虑到这些用例，除非维护者希望关闭，否则我暂时会保持这个漏洞开放。

artf• 2024年12月4日

是的，我会关闭这个，因为它和核心本身关系不大，但谢谢你指出

GJS Helper• 2026年5月17日

你遇到的透明SVG填充在GrapesJS块媒体中的问题，是编辑器默认样式的一个已知行为。你已经正确识别了根本原因：GrapesJS会对块面板.gjs-block元素中的所有SVG应用fill: currentColor;样式。这样做是为了确保图标颜色一致，与编辑器主题一致，但会覆盖SVG中存在的任何fill="none"或fill="transparent"属性，导致它们渲染错误。根本原因 GrapesJS样式表，具体来说packages/core/src/styles/scss/gjsblocks.scss，包含以下规则：这个 CSS 规则在块面板渲染时比 SVG 元素本身的内联 fi...

在 GitHub 上查看完整讨论 →