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 的相关文章

  • 主页加载方式与其他页面不同[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 为什么我的主页宽度是 1024 px
  • jQuery:在视口中居中 fancybox

    我目前正在使用 fancybox 版本 2 在单击缩略图时显示我的图像 但我似乎无法让 fancybox 位于视口的中间 垂直而言 因为水平方向没问题 我已经尝试了很多事情 这是最新的 CSS fancybox wrap position
  • 水平居中包含浮动 li 元素的

    我一直在尝试制作一个带有悬停下拉菜单的水平导航栏 我已经让它工作了 但是为了让 中的所有元素并排 水平 它们必须应用 float left 有什么办法让他们回到中心吗 另外 我的 CSS 编码风格 正确吗 我觉得我做错了 谢谢 HTML d
  • DIV 内的右对齐按钮

    作为一名后端开发人员 我感觉更舒服 但我有一个样式问题困扰着我 我已经发布了我的场景示例here http jsfiddle net jDaM8 1 我正在创建一个 div 它根据单击按钮显示 隐藏以显示特定项目的详细信息 该部分工作正常
  • HTML/CSS - 打印样式、背景颜色和图像不会在 IE 和 Firefox 中显示?

    我如何在打印时显示背景颜色和图像 我知道这是浏览器属性 但我想从 CSS 完成它 例如我用于 webkit 的 CSS webkit print color adjust exact 那么我怎样才能实现它呢 不 这是不可能的 请参阅 web
  • Anchor Cycler / 下拉菜单定期导入学校班级数据

    SO 我最近一直在研究一些 html javascript css 为我的学生创建一个在线表格来查看详细信息 分数和各种信息 但我遇到了困难 不确定如何做我正在尝试的事情去做 我将所有这些内容发布在一个线程中的原因是因为我认为其中几个可能会
  • 禁用输入字段上的文本选择

    我正在使用 IBM Worklight HTML5 CSS3 和 javascript 开发混合应用程序 有没有可能的方法来禁用输入字段上的文本选择 我的屏幕上有一个用户名和密码字段 并且希望禁止用户在输入字段中选择文本 另外 应禁用复制粘
  • 如何使用 ng-repeat 更改 AngularJS 中特定 的背景颜色

    如何为每一行设置不同的背景颜色 举个例子 第 1 行 蓝色 第2行 红色 第三行 绿色 main js scope names fName John lName David fName Richard lName Daniel fName
  • 为什么 inline-block 会根据子元素的宽度自动调整宽度?

    如果这个问题已经在 stackoverflow 上提出过 请纠正我 如果确实如此 我深表歉意 但我已经寻找了一段时间并且只找到了hows not whys 我的问题是 父 div 似乎会自动占据页面的整个宽度 除非 display inli
  • 的 CSS margin-top 影响父级的边距

    我已经研究这个问题有一段时间了 但还没有找到直接的答案 当向元素添加页边距顶部时 就我而言 它主要发生在标题上 在许多情况下 边距顶部是与父级共享的 HTML div h1 My title h1 div CSS div padding 2

  • jQuery:如何将 jQuery 日期选择器放入 Bootstrap Popover 中? [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我试图在引导弹出窗口中显示 jquery datepicker 并尝试了解决方案引导程序弹出窗口内的日期选择器 关闭 https
  • 数据协议 URL 大小限制

    data URL 方案是否有大小限制 价值观 我对流行网络浏览器的限制感兴趣 换句话说 多久可以data image jpg base64 base64 encoded data be in img src data image jpg b
  • 阻止内容因 Bootstrap 中的重叠而被下推

    In a 上一个问题 https stackoverflow com questions 22293227 make an element overlap contents below it using bootstrap 22293428
  • 角度材料在一个表单字段中输入和选择

    I want the input field and the drop down field in the same area like the one on the left I did this on the inspector 无论我
  • 如果没有当前类的引用,svgLoader 无法工作

    这是我的主类 通过这个类 我通过 url 从 api 获取数据 并创建一个适配器类来维护它 但发生了意外错误 这是MainActivity java public class MainActivity extends AppCompatAc
  • 将焦点和光标设置到文本输入字段/字符串 w 的末尾。 Jquery [重复]

    这个问题在这里已经有答案了 我有以下函数 将选择器添加到搜索输入作为高级选项 就像堆栈溢出高级搜索一样 当您单击要搜索的内容时 它会添加一个前缀 请参阅下面的 Jquery
  • 是否可以对 Flexbox 插入、删除和项目位置进行动画处理?

    这个问题最初是在 2012 年提出的 https stackoverflow com questions 11106876 is it possible to animate flexbox inserts removes但是提供的答案并未
  • 当CSS文件存在时,无法在服务器上找到它们[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 当运行本地服务器时 这一切都运行良好 我有 header html 其中包含以下代码 在 public html 目录 与 header h
  • 使用 Jsoup 选择没有类的 HTML 元素

    考虑一个像这样的 html 文档 div p p p p p class random class name p div 我们怎样才能选择所有p元素 但不包括p元素与random class name class Elements ps b
  • 为什么 JDOM 的 getChild() 方法返回 null?

    我正在做一个关于 html 文档操作的项目 我想要现有 html 文档中的正文内容将其修改为新的 html 现在我正在使用 JDOM 我想在我的编码中使用 body 元素 为此 我在编码中使用了 getChild body 但它向我的程序返

随机推荐

  • 在 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