Mozilla 无法使用 svg stroke-dashoffset

2024-01-02

它在 Google Chrome 中运行良好,但在 Mozilla Firefox 中我的 svg 路径突然出现!
怎么了?

Body:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 390 170" enable-background="new 0 0 390 170" xml:space="preserve">
     <path id="ADM-A" class="ADM-SVG"
          d="M78.246,105.517c0,0-27.246-0.517-27.246-26.972c0-24.878,25.626-25.211,25.626-25.211S103,54,103,80.113c0,22.554,0,26.779,0,26.779"
     />
</svg>

Style:

.ADM-SVG {
    fill: none;
    stroke: #ffffff;
    stroke-width: 17;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    stroke-opacity: 1;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    -webkit-transition-property: stroke-dashoffset;
    -webkit-transition-duration: 10s;
    -moz-transition-property: stroke-dashoffset;
    -moz-transition-duration: 10s;
    transition-property: stroke-dashoffset;
    transition-duration: 10s;
}

Script:

$("#ADM-A").css({ "stroke-dashoffset": 0 });

您可以使用 css 为 svg 制作动画,a fiddle http://jsfiddle.net/Diesel9Design/u9axm/1/但我注意到,对于 chrome 在此处输入代码与 Firefox,它们的动画效果不同。

以下适用于 Firefox:

.logo-rect {
    fill: transparent; 
    stroke:#333;
    stroke-width:3px;
    stroke-dashoffset:-120;
    stroke-dasharray:360 360;
    opacity:1;
    transition: stroke-width 2s, stroke-dashoffset 2s, stroke-dasharray 2s, opacity 2s;
}

然而,对于 Chrome,将 dataoffset 更改为 -360,它将正确显示动画。

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

Mozilla 无法使用 svg stroke-dashoffset 的相关文章

  • 如何使用XPath选择非空段落?

    我想要抓取的网页具有类似的结构 每个都有一个段落是一个问题 一个段落是一个答案 我想抓取每个问题和答案并将它们存储在两个项目中 问题是 在某些页面上 问题和答案分别是 xxx p 1 and xxx p 2 但在其他页面上 xxx p 1
  • 如何让CSS选择以字符串开头的ID(不是Javascript)?

    如果 HTML 中有这样的元素 id product42 id product43 如何匹配所有以 product 开头的 id 我已经看到了完全使用 javascript 执行此操作的答案 但是如何仅使用 CSS 执行此操作 id pro
  • 是否可以设置输入文本值的样式?

    我想知道是否可以设置输入框值的样式 such http jsfiddle net aCwhY as
  • 使用内联样式有哪些风险?

    A 内容安全政策 https developer mozilla org en US docs Web HTTP CSP with a default src or style src指令将阻止内联样式应用于
  • 类方法作为 JavaScript 中的事件处理程序?

    JavaScript 中是否有最佳实践或通用方法将类成员作为事件处理程序 考虑以下简单示例
  • 编辑类名中带有空格的元素的 css 样式

    我正在创建一个 tumblr 我必须编写一个外部 CSS 文件 但我在编辑 post 元素的 css 样式时遇到问题 这是它的结构 li class post quote other code li 问题是类名中有空格 我如何创建一个 CS
  • iPad - 无法在框架内滚动

    我无法滚动 iPad Safari 中框架内调用的 pdf 我已经尝试过两件事 2 指滚动 使用对象 嵌入代替框架 但这是行不通的 事实上我已经尝试了很多东西 溢出 高度等等 请帮我 先感谢您 根据这篇文章http support appl
  • 您可以将现有的 div 复制到模式对话框吗

    我有一个带有多个面板的仪表板来显示不同的信息 我希望能够添加一个按钮来以模式显示面板 我正在使用引导程序 我所能找到的只是已经编写的模态 我想复制作为面板的 div 标签的内容 然后将其显示在模型中 但我不确定如何进行 该面板的 html
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 将 JSON 发布到 Python CGI

    我已经安装了 Apache2 并且 Python 可以工作 但我有一个问题 我有两页 一个是 Python 页面 另一个是带有 JQuery 的 Html 页面 有人可以告诉我如何让我的 ajax 帖子正常工作吗
  • 在流体设计中将元素的宽度调整为其高度的百分比,反之亦然? [复制]

    这个问题在这里已经有答案了 我正在制作响应式设计 无论屏幕尺寸是什么 它都必须保持其元素的比例 高度与宽度 所以我不知道任何元素的像素大小 并且我只能以 工作 我可以将宽度或高度设置为浏览器大小的百分比 但我不知道如何设置其他属性值 仅使用
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • 可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗?

    我想使用 HTML5 视频播放器并流式传输视频 S3 CloudFront 可以实现这一点吗 我了解 Amazon 使用 RTMP 流媒体协议和 HTML5video标签不支持 RTMP 有没有办法用 HTML5 播放器播放视频 Wayne
  • 使用 CSS 覆盖透明 div 中的不透明文本

    我试图使透明 div 内的文本没有不透明度 也就是全黑 div style background 3cc p style background 000 This text should be all black p div 只用 CSS 就
  • Outlook 2013 渲染问题:嵌套表格截断相邻文本

    在开发 html 电子邮件通讯时 我经常使用类似于以下的结构 table width 244 border 0 cellpadding 0 cellspacing 0 tr td table border 0 align left tbod
  • 没有类的 CSS 选择器

    我正在使用选择器来选择不具有一个类的所有元素 list th not foo some rules 我怎样才能将其应用到多个班级 list th not foo list th not bar some rules 上面的 CSS 当然不会
  • Android中webview的截图方法

    我在 webview 中的 html5 canvas 上画了一些线 并尝试使用下面的代码截取 webview 的屏幕截图 WebView webView WebView findViewById R id webview webView s
  • 在webview android中加载本地html文件

    我正在尝试在 android 的 webview 中加载 html 文件的内容 但是 它给了我 网页不可用错误 如果我尝试使用谷歌或雅虎等网站 它们就会起作用 html文件位于src gt main gt assests gt index
  • 如何:带有 onclick 的 div 位于另一个带有 onclick 的 div 中

    只是一个简单的问题 我遇到了 div 与 onclick javascript 之间的问题 当我点击内部 div 时 它应该只触发它的 onclick javascript 但外部 div 的 javascript 也会被触发 用户如何点击
  • D3 将现有 SVG 字符串(或元素)追加(插入)到 DIV

    我到处寻找这个问题的答案 并找到了一些我认为可能有用的资源 但最终没有让我找到答案 这里有一些 外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu

随机推荐

  • 在 Windows 上查找使用端口的进程的 PID

    我的服务在经典启动时崩溃 java rmi server ExportException Listen failed on port 9999 我怎样才能找到杀死它的进程 只需打开命令 shell 并输入 假设您的端口是 123456 ne
  • React-apollo 的动态突变文档

    我需要动态更改我的突变文档 以便能够在单个突变中创建多个项目 所以我有这个功能createOrderName它需要一个整数并能够创建正确的突变文档 例如 createOrderName 2 gets mutation createOrder
  • Ruby 中解析 HTML 文档的方法?

    就像 PHP 中的 DOMDocument 类一样 RUBY 中是否有任何类 即核心 RUBY 可以从 HTML 文档中解析并获取节点元素值 目前还没有内置的 HTML 解析器 但有一些非常好的解析器可用 特别是Nokogiri http
  • 如何使用 CarrierWave 重新组织现有文件夹层次结构?

    我正在尝试使用以下命令在我的 S3 存储桶中移动文件CarrierWave重新组织文件夹结构 我来到一个现有的 Rails 应用程序 其中一个类的所有图像都被上传到一个名为的文件夹中 uploads 这会导致问题 如果两个用户上传具有相同文
  • 使用paint(Graphics p)时删除java中的一行?

    我使用以下函数画了一条线 public void paint Graphics p super paint p p drawLine 600 200 580 250 我想知道有没有办法删除这一行 那么是否可以在main 程序的方法 您可以使
  • 使用 JavaScript 重新排列 ListBox 元素会导致回发时发生事件验证错误

    我创建了一个项目交换器控件 其中包含两个列表框和一些按钮 允许我在两个列表之间交换项目 交换是使用 javascript 完成的 我还在列表中上下移动项目 基本上 当我将项目移动到右侧的列表框时 我将元素的数据键 GUID 存储在隐藏字段中
  • 有没有办法加快 numpy.where 的循环速度?

    想象一下 您有一个分割图 其中每个对象都由唯一索引标识 例如看起来与此类似 对于每个对象 我想保存它覆盖的像素 但我只能提出标准for循环至今 不幸的是 对于包含数千个单独对象的较大图像 这结果非常慢 至少对于我的真实数据来说是这样 我能以
  • 如何在 Blackberry 中以编程方式发送短信

    如何在黑莓手机中以编程方式发送短信 我在某处读到 我需要服务器端和客户端代码来发送短信 这是真的吗 为了将消息从一个设备发送到另一个设备或从模拟器发送到设备 我真的需要服务器端和客户端代码吗 我在客户端的某个地方找到了这段代码 但我没有得到
  • 这种模式有名字吗? (C# 编译时类型安全,具有不同类型的“params”参数)

    这种模式有名字吗 假设您想要创建一个采用可变数量参数的方法 每个参数都必须是一组固定类型 以任何顺序或组合 之一 并且其中一些类型您无法控制 一种常见的方法是让您的方法采用 Object 类型的参数 并在运行时验证类型 void MyMet
  • as3 - 从父 swf 到子 swf 的调度事件

    我有一个主要的 父 swf 它加载了其他几个swf 如果主 swf 中发生某些情况 我需要将其告知其中一个子 swf 反过来这似乎也很有效 任何子级都可以简单地使用dispatchEvent 并且我可以设置主swf 来侦听该事件 但是 我无
  • 真正的不安全代码性能

    我知道不安全的代码更适合访问 Windows API 之类的东西并进行不安全的类型转换 而不是编写性能更高的代码 但我想问您是否注意到使用它在实际应用程序中带来了任何显着的性能改进与安全的 C 代码相比 一些性能测量 性能优势并不像您想象的
  • 如何使用 spring-boot 外部化数据源配置?

    我目前正在尝试将现有的 spring 应用程序移动到 spring boot 从而重新创建无需启动即可工作的内容 我想从外部源配置一些属性 如 spring datasource 具体来说是一个包含多个属性文件的文件夹 我设置了一个配置类来
  • 简单的 Android 相机应用程序 - 旋转导致 NullPointerException

    我是 Android 开发新手 正在摆弄相机 我只是想创建一个简单的应用程序 它可以使用本机相机应用程序拍照并返回该图像的文件路径 我的工作正常 但我遇到了一个奇怪的错误 当我点击按钮启动相机时 如果我在相机应用程序中更改屏幕方向 并且在退
  • 如何将字符串格式化为越南货币?

    如果我将 区域和语言 中的格式设置为美国 CultureInfo cul CultureInfo CurrentCulture string decimalSep cul NumberFormat CurrencyDecimalSepara
  • jQueryUI 可拖动帮助器选项帮助

    是否可以修改 jQueryUI 使用可拖动元素创建的克隆助手 我不想要精确的克隆作为助手 我只想要类似的东西 For the helper选项 而不是clone 使用返回 DOM 对象的函数 使这个对象以任何你喜欢的方式 相似 像这样的东西
  • 值没有插入到 SQLite 数据库

    我创建了一个用于测试的应用程序two edittexts Email and password 和 2 个按钮 submit and viewdata 我正在调试这个应用程序 它工作正常 我想通过添加一个来更新此应用程序Edittext N
  • 域服务与 WCF 服务?

    我慢慢地深入研究 Silverlight 经过一段时间的尝试 我终于能够将我自己的自定义对象从我的 Web 返回到我的 silverlight 客户端 使用启用了 Siverlight 的 WCF 服务 现在 我对域服务和 WCF 服务的差
  • 使用spark-submit,--total-executor-cores选项的行为是什么?

    我正在用 python 封装的 C 代码运行 Spark 集群 我目前正在测试多线程选项的不同配置 Python 级别或 Spark 级别 我在 HDFS 2 5 4 集群上使用带有独立二进制文件的 Spark 该集群目前由 10 个从站组
  • 可重现:为什么在 C 中传递这个对象会破坏我的代码?

    根据我的理解 C 假设所有参数都是 int 并且它返回 int 我想传递这个对象 但我不知道如何传递 而且据我所知 它与 int 的大小相同 但它破坏了 这是可重现的代码 在 testc c 中 注意 这必须位于 C 文件中 int tes
  • Mozilla 无法使用 svg stroke-dashoffset

    它在 Google Chrome 中运行良好 但在 Mozilla Firefox 中我的 svg 路径突然出现 怎么了 Body