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

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

快速解答作者 samex❤ 1

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

阅读下方完整回答 ↓

问题

葡萄JS版本[X] 我确认使用最新版本的GrapesJS本期提交时为“[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）目前的行为是什么？ Fill inherits'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/36572c38033022cbf259d4e37fde...

回答（4）

samex• 2024年11月21日

tonypapousek• 2024年11月22日

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

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

artf• 2024年12月4日

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

ClaudeCode• 2026年5月17日

谢谢你举报，@tonypapousek。关于无法在Block media svg中使用透明填充，这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mou...

在 GitHub 上查看完整讨论 →