程序员经验分享-hwhale

Firefox 在 SVG“使用”具有遮罩的元素上出现不透明度问题

2024-04-14

我最近注意到我的一张 SVG 图像在 Firefox 中查看时似乎失去了半透明性。我一直在追踪这个问题，它让我发现opacity不被服从时use元素（具体来说）有一个mask随附的。

我能够使用fill-opacity解决这个问题，但这并不理想。我不完全确定是什么导致了它，以及是否应该报告给它的错误firefox，或者如果我只是在某个地方犯了错误。

我将这个 JSFiddle 放在一起来说明问题和替代方案：https://jsfiddle.net/bg4o5y63/ https://jsfiddle.net/bg4o5y63/

在 Chrome、Edge 和 IE11 中，所有示例显示相同（如预期），但在 Firefox 64.0.2（最新）中#1不遵守规定opacity.

这似乎也影响use内部使用的元素masks自己有一个mask.

有什么想法可能导致这种情况，或者我是否在某个地方犯了错误？

Edit (Screenshot attached): enter image description here


None

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

firefox

SVG

mask

xlink

Firefox 在 SVG“使用”具有遮罩的元素上出现不透明度问题 的相关文章

  • 创建响应式 SVG 剪辑路径 / 使 SVG 响应式

    我正在尝试使用创建响应式 SVG 剪辑路径

  • firefox 不支持 mediastreamtrack.getsources，如何执行等效操作

    有没有等效的方法来获取连接到 PC 的视频设备列表 除了内置网络摄像头连接之外 我还有一个外部网络摄像头连接 mediastreamtrack getsources 在 Chrome 中工作 但 Firefox 报告 TypeError M

  • 更改svg中半圆的背景颜色

    我想在此 svg 代码上创建上弦月和第三弦月

  • Firefox OS 后台服务

    我想构建一个应用程序 用户可以通过它输入一些设置 并且应用程序将启动后台服务来根据这些设置执行一些任务 我只想在模拟器中运行应用程序和后台服务 我知道它需要 认证 模式才能运行后台服务 但我现在不考虑在 Firefox Marketplac

  • 如何逐步绘制矢量路径？ （拉斐尔.js）

    如何逐步动画化矢量路径 就像它被绘制一样 换句话说 慢慢地逐像素地显示路径 我在用着Rapha l js but如果您的答案不是特定于库的 例如可能有一些通用的编程模式可以完成此类事情 我对矢量动画相当陌生 欢迎 使用直线路径很容易做到 就

  • Qt 支持在 QIcon 中为 SVG 着色

    看来 Qt 不支持 SVG 中路径标签上的描边 填充选项

  • SSE(EventSource)：为什么不超过6个连接？

    我想看看在我的机器超载之前我可以设置多少个并发 SSE 又名 EventSource 连接 但使用 Firefox Firefox 18 或 Firefox 20 进行测试时 它在 6 个连接处停止 附加连接没有给出错误 但不发送任何数据

  • 编辑现有的 Firefox 插件

    对于我正在从事的项目之一 我必须使用 DOM Inspector 来调试 Firefox 扩展 DOM 检查器的问题在于 它只向您显示代码下方的浏览器 无法分离浏览器或并排显示代码部分或浏览器 它对我不起作用 因为我正在调试的插件有一个很大

  • 使用 d3 进行多级/分组轴标签

    我想知道是否有一种简单的方法可以在 d3 中添加多级 分层 分组轴标签 例如 如果我有一个折线图 其中 x 轴的月份名称跨越多年 那么我还希望将年份作为月份名称下方的标签 因此它看起来像这样 Oct Nov Dec Jan Feb Mar

  • 使用“SVG 多边形”悬停状态在“SVG”之后淡入 div

    有没有一个只用CSS来解决这个问题的方法 我希望能够在 SVG 之后淡入 div 但前提是用户将鼠标悬停在 SVG 多边形上 代码看起来像这样

  • 在 d3 中应用转换时出现错误

    我正在尝试对我在 d3 中设计的条形图应用一些过渡效果 这是我的代码 svg selectAll bar data data enter append g attr class bar append rect attr rx barRadi

  • 为什么 Firefox 3.6 改变了 jQuery 和 CSS 属性？

    为什么 Firefox 3 6 改变了 jQuery 和 CSS 属性 好吧 更具体一点 我有一个交叉淡入淡出插件 可以在放置在彼此之上的两个图像之间创建发光效果 该函数 如下所示 将使顶部图像在悬停时在 200 毫秒内转换为不透明度 0

  • 在 Jade 模板中包含 SVG xml

    是否可以创建一个 Jade mixin 它从文件系统读取文件 并将其回显到渲染的 HTML 中 我试过这个 mixin svg file var fs require fs var xml fs readFileSync file div

  • Selenium Webdriver - Firefox 中元素不可点击错误

    通常在 Chrome 驱动程序中出现的元素不可点击错误也恰好在 Firefox 中出现 显示的错误消息 Exception in thread main org openqa selenium WebDriverException Elem

  • 将 FireBug 用于带有框架的网站

    我下载了 Firebug 并尝试使用它来调试使用框架的站点的 JS 我的理解是 当我进入 Firebug 中的 脚本 选项卡时 我会看到 aspx 上的 JS 函数以及包含的任何文件中的 JS 并且我将能够设置断点 然而 我在这个网站上看到

  • :target 伪类在 Firefox 中无法正常工作

    我正在使用 target 伪类制作一个具有 CSS 灯箱类型效果的页面 当您单击图像时 会弹出一个包含信息的框 当您单击任意位置时 该框会再次消失 它在 Chrome 和 IE 中运行良好 但在 Firefox 中存在一个奇怪的错误当您将鼠

  • 底部带有三角形的 div 和背景图像

    我想做一个div 有一个底部的三角形 但我需要三角形上的背景图像为了出现 我尝试使用伪元素 after 但它不起作用 homebg after content position absolute top 100 left 0 right 0

  • 自定义 SVG 未加载到我的图像标签中

    目前我正在尝试将自定义 svg 组件加载到图像标签内 但由于某种原因 我无法看到地图组件内的 svg 图像 我的自定义 SVG 文件如下所示 我在 SVG 中加载另一个图像

  • 文本的彩虹色

    rainbowtext background image webkit gradient linear left top right top color stop 0 f22 color stop 0 15 f2f color stop 0

  • 为什么将 x 和 y 设置为 0 时 svg 文本会消失？

    我刚刚开始阅读有关svg我提出了以下问题 我正在创建一个简单的svg with a text里面如下图所示 从我的阅读中我了解到x and y of the text标签声明文本在标签内的位置svg space 为什么当我同时设置x and

随机推荐

  • IntelliJ 工件 JAR 文件：无法找到或加载主类

    我在 IntelliJ 中创建了一个 JAR 工件 可以选择将 JAR 文件提取到目标 JAR 看起来像这样 我正确填写了清单信息 我使用 ZIP 检查了 JAR 文件的内容 它包含 jar 文件 正确填充的 MANIFEST MF 和我的

  • 隐藏文件输入在提交时不保留值

    我有一个带有假按钮的隐藏文件输入和用于浏览器显示一致性的输入 我目前也可以看到原始输入 并且发现使用它上传文件一切运行正常 然而 使用 dummyfile 中的按钮通过 javascript 触发点击 该值将按预期加载 并且在 UI 中也是

  • 如何在 Linux 上动态插入 Python 中的 C 函数（无需 LD_PRELOAD）？

    我如何在运行时 不LD PRELOAD 拦截 挂钩 C 函数 例如fopen 在 Linux 上 就像 Windows 上的 Detours 一样 我想从 Python 执行此操作 因此 我假设该程序已经在运行 CPython VM 并重新

  • 文件上传 API：多部分/表单数据与正文中的原始内容？

    我注意到 至少 有两种方法可以通过 API 将文件上传到 HTTP 服务器 您可以使用multipart form data 这是浏览器本机对文件上传 HTML 输入所做的操作 但您也可以POST请求正文中的文件内容 可能具有正确的 Con

  • 无效的 int 输入陷入无限循环[重复]

    这个问题在这里已经有答案了 do cout lt lt Enter the numerator and denominator of the first fraction cin gt gt a gt gt b cout lt lt end

  • 通过另一个表对 hasMany 进行 Sequelize

    好的 我有以下三个models Module var Module sequelize define module id DataTypes INTEGER name DataTypes STRING description DataTyp

  • Linux 核心转储太大！

    最近 我注意到应用程序生成的核心转储的大小有所增加 最初 它们的大小约为 5MB 包含大约 5 个堆栈帧 现在我的核心转储超过 2GB 其中包含的信息与较小的转储没有什么不同 有什么方法可以控制生成的核心转储的大小吗 它们不应该至少小于应用

  • 使用 Neo4J 和 Spring Data 按 ID 创建关系

    我定义了一个简单的节点对象 如下所示 Node product public class Product Id private String sku Relationship type SOLD BY private Set

  • 如何更改应用商店中的销售国家/地区[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 您好 我的应用程序出现在美国商店 但它主要是澳大利亚应用程序 如何让它出现在澳大利亚应用商店而不是美国应用商店中 但是我仍然可以在澳大利亚应用商店中搜

  • 通过 feature_columns 使用 Dataset API 将自由文本特征输入 Tensorflow Canned Estimators

    我正在尝试建立一个模型reddit score f subreddit comment 主要是作为一个示例 我可以在此基础上构建一个工作项目 我的代码是here https github com andrewm4894 my google

  • iOS：UIButton根据文本长度调整大小

    In interface builder holding Command will resize a button to fit its text I was wondering if this was possible to do pro

  • 如何在 ColdFusion 中通过多组验证尝试来实现 OWASP ESAPI 验证器？

    我一直在研究 ColdFusion 9 中包含的 OWASP ESAPI 实用程序 ColdFusion 的内置企业安全 API http www petefreitag com item 788 cfm The encoder实用程序非常

  • PHP 致命错误

    当 PHP 出现致命错误时 有没有办法让代码继续 而不是退出 例如 我遇到超时致命错误 并且我希望每当它发生时就跳过此任务并继续执行其他任务 在这种情况下 脚本退出 有一种使用输出缓冲的 hack 可以让您记录某些致命错误 但是在发生致命错

  • 在WP7中调用普通的Web服务

    我有普通的 NET Web 服务 不是 WCF 服务 我已使用服务参考将此服务添加到我的 WP7 项目中 因为我们没有 通常我们会使用 添加服务引用 选项添加 WCF 服务 但这里我使用 添加服务引用 选项添加普通的 Web 服务 例如我有

  • python 3.5 中的 json.loads 和 Redis

    我使用 json dumps 创建了一个 JSON 对象 并在 Redis 列表中将其 RPUSH ed 当使用 LRANGE redis lrange 返回 JSON 时 我收到一个二进制字符串 b si 00 ff 所以 json lo

  • 如何将 ISO 8601 格式的日期值转换为 JavaScript 中的日期对象？

    我一直在尝试将日期值转换为更易读的格式 为此 我尝试使用 JavaScript 解析日期Date parse 方法 然而 这不适用于输入 例如 2007 09 21T14 15 34 058 07 00 我有 最终目标是输出一个日期字符串

  • Eclipse IDE Java 构建路径已更改。我选择哪个？

    我正在尝试遵循一些有关 Selenium 的教程 但此时遇到了困难 右键单击 项目 并选择属性 在 属性 对话框中 单击 Java 构建路径 单击库选项卡 然后 单击 添加外部 JAR 添加外部 JARS 按钮呈灰色且禁用 该对话框显示模块

  • pyside-rcc“dyld：库未加载：...”

    我是一个 python 和 Qt 新手 我在运行 pyside rcc 和 Pyrcc4 时遇到一些问题 问题不在于可执行文件的链接 而在于库问题 我不是 Unix 向导 可能也没有帮助 当我跑步时 pyside rcc我收到以下错误 dy

  • 在 LINQ 中查找相似记录

    我有以下 LINQ 查询 它将用于查找任何 相似 的货物 from c in cons group c by new c TripDate Value c DeliveryPostcode c DeliveryName into cg le

  • Firefox 在 SVG“使用”具有遮罩的元素上出现不透明度问题

    我最近注意到我的一张 SVG 图像在 Firefox 中查看时似乎失去了半透明性 我一直在追踪这个问题 它让我发现opacity不被服从时use元素 具体来说 有一个mask随附的 我能够使用fill opacity解决这个问题 但这并不理

热门标签