我可以使用 CSS 更改 svg 路径的填充颜色吗?

2023-11-24

我有以下代码:

<span>
   <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
      <desc></desc>
      <defs/>
      <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
    </svg>
</span>

是否可以使用 CSS 或其他方式更改 SVG 路径的填充颜色,而无需在内部实际更改它<path> tag?


是的,您可以将 CSS 应用于 SVG,但您需要匹配元素,就像设置 HTML 样式一样。如果您只想将其应用于所有 SVG 路径,您可以使用,例如:

​path {
  fill: blue;
}​

外部 CSS 似乎覆盖了路径的fill属性,至少在我测试的基于 WebKit 和 Gecko 的浏览器中是这样。当然,如果你写,说,<path style="fill: green">那么它也会覆盖外部 CSS。

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

我可以使用 CSS 更改 svg 路径的填充颜色吗? 的相关文章

  • 更改 Angular 对话框的背景颜色

    我正在尝试更改对话框背景 无需触摸style css file 正如其他一些答案所说 有很多方法可以设置对话框样式 1 此解决方案适用于宽度和高度 但透明背景被 忽略 this dialog open DialogComponent dis
  • Bootstrap 按钮的检查状态

    我想在 Bootstrap 3 0 2 中设置组复选框的选中状态 docs http getbootstrap com javascript buttons html div class btn group div
  • Bootstrap .row margin-left: -15px - 为什么它会缩进(来自文档)

    我在 Bootstrap 文档中看到了这一行 http getbootstrap com css grid intro http getbootstrap com css grid intro It says 列通过填充创建装订线 列内容之
  • Bootstrap:列表内联项目符号?

    有人知道如何在 Bootstrap 3 中水平列表中的元素之间添加项目符号 分隔符吗 ul class list inline li Author Michal li li Modified 17 08 2014 li li Comment
  • iPhone 4 上不稳定的 CSS3 动画

    我有一个非常简单的 或者至少我认为是 动画 我所做的只是 webkit background size 的动画 bubble position relative width 397px height 326px background url
  • 如何在索引视图中打印关联数据

    subjects this gt Subjects gt find all contain gt Users fields gt Users username Users email gt hydrate false gt toArray
  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage
  • Zurb 基金会粘性页脚

    我想使用 Foundation 4 拥有粘性页脚 并且我想使用 HTML5
  • Chrome 和 Safari 错误::不允许加载本地资源: file:///D:/CSS/Style.css

    当我在 chrome 或 safari 中访问我的 aspx 页面时 它在控制台中显示此错误 不允许加载本地资源 file D CSS Style css 在 IE 和 FF 中一切正常 我使用外部 CSS 通过 aspx 页面链接 我已经
  • Angular 2 + Semantic UI,组件封装打破风格

    我使用 Angular2 和 Semantic UI 作为 CSS 库 我有这段代码 div class ui three stakable cards a class ui card a a class ui card a a class
  • Bootstrap

    我正在尝试使用 Bootstrap 构建一个网站 到目前为止 一切都按计划进行 我想要一个固定的导航栏 并且我正在使用内置函数 div class navbar navbar fixed top 这很棒 正是我所需要的 但我希望导航和标题从
  • 固定 Div 与静态 div 的滚动条重叠

    我无法按照我想要的方式设计布局 我有一个内容区 content 您可以在示例图像中看到的灰色 里面有一个黄色元素 这个div是position static height 100 现在我有一个 left paneldiv 也 与positi
  • Ionic 2:隐藏滚动条并继续滚动

    我只想hide滚动条 在需要滚动的页面中 我正在使用离子2 My 不工作解决方案 scroll content bar overflow hidden 此解决方案隐藏滚动条but使屏幕不可滚动 首先 改变浏览器的自然行为和预期的用户体验是一
  • CSS 边框样式 INSET 或 GROOVE 看起来与 IE9 FF4 或 Safari5 或 Chrome2 非常不同

    抱歉 我是个白痴 但是当我尝试获得某种凹槽效果或插入效果作为边框样式时 我从不同的浏览器中得到了一些非常非常大的视觉结果 使用时 border 5px groove A00 or border 5px inset A00 Firefox 3
  • Twitter Typeahead 上使用 Bootstrap 3 的 CSS 问题

    随着 Bootstrap 3 的发布 Typeahead 已被删除 取而代之的是 https github com twitter typeahead js https github com twitter typeahead js 我已经
  • 如何在 Rails 5 中设置资产管道以使用自定义字体?

    我必须使用自定义字体贾米尔 努里 纳斯塔莱克 http www urdujahan com urdu fonts Jameel 20Noori 20Nastaleeq zip在 Rails 5 应用程序中 我以前从未使用过 Rails 中的
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • 为什么我的 Web 组件 CSS 不显示?我没有使用shadowDOM

    我有一个没有使用 ShadowDOM 的 Native V1 组件 所以我将 CSS 放在 但是当其他人使用我的组件时 我的 CSS 就不再起作用了 仅当其组件确实使用 ShadowDOM 时才会发生这种情况 我的组件的示例代码 class
  • 选择子元素但不选择孙元素

    我有以下简化的代码 div p text p div div p text p div div p text p div div p text p div 每当我设置一些值时 content pCSS 文件中的元素 更改也适用于 col1

随机推荐

  • 如何作为脉冲应用程序在表格之间复制单元格

    我需要复制单元格2 个表视图之间 我有一个或多或少可行的解决方案 然而 这并不顺利 我很想做类似的事情脉冲应用程序重新排序 Feed 选项 脉冲工作方式的特殊之处在于 重新排序动画与正常的单元格重新排序相同 但单元格仍然可以在表之间移动 这
  • 如何模拟 httpcontext 使其在单元测试中不为 null?

    我正在编写一个单元测试 控制器方法抛出异常 因为 HttpContext ControllerContext 为 null 我不需要断言 HttpContext 中的任何内容 只需要它不为 NULL 即可 我做了研究 我相信最小起订量就是答
  • 如何在 Rails 测试中将 autotest 和 spork 结合起来?

    自动测试通过仅运行更改的测试来提高测试运行的速度 但我想通过使用 spork 预加载 Rails 环境来进一步推动它 这样我就能获得更快的反馈 这可能吗 自动测试 https github com grosser autotest Spor
  • D3圆弧渐变[关闭]

    Closed 这个问题不符合堆栈溢出指南 目前不接受答案 我正在尝试使用 d3 创建一个计时器 它的梯度会在 0 到 100 之间变化 例如 深橙色为 0 浅橙色为 100 我可以在深橙色和浅橙色之间进行弧线过渡 但在找到任何允许我对弧线应
  • 如何在MonoDevelop中进入框架源代码

    在 MonoDevelop 中调试项目时 如何进入 Mono Framework 源代码 我正在运行 openSUSE 11 3 中的普通 MonoDevelop 这是一篇旧帖子 但我今天偶然发现它寻找答案 所以希望它对其他人有帮助 除非您
  • 为什么 ***NO_CI*** 仍然导致持续集成构建?

    我最近发现了 TFS 的 隐藏功能 如果您的评论包含以下内容 它允许您阻止 CI 构建启动 NO CI 我在家里运行了 TFS 这个小技巧很有用 在工作中 我们还使用 TFS 2010 我发现这仍然不能阻止 CI 构建在我们的设置中启动 我
  • angularJS 发送 OPTIONS 而不是 POST

    我被困在这两天我找不到解决方案 当我执行 AngularJS POST 时 它会在标头中发送选项并从 API 返回错误 代码看起来没什么特别的 http defaults headers post Content Type applicat
  • 使用 require.js 和 Java/Rhino 解析模块

    我试图让 require js 使用 Java 6 和 Rhino 在服务器端加载模块 我能够很好地加载 require js 本身 犀牛可以看到require 功能 我可以看出 因为 Rhino 抱怨当我更改时它找不到该功能require
  • 将功能 pandas.series 中的 -inf 值替换为 np.nan [重复]

    这个问题在这里已经有答案了 我想将 pandas series 功能 我的数据帧的列 中的 inf 值替换为 np nan 但我无法做到 我努力了 df feature df feature replace np infty np nan
  • gcloud ml-engine 对大文件返回错误

    我有一个训练有素的模型 它接受较大的输入 我通常将其作为形状 1 473 473 3 的 numpy 数组来执行 当我将其放入 JSON 时 我最终得到了大约 9 2MB 的文件 即使我将其转换为 JSON 文件的 Base64 编码 输入
  • SBT Scala 跨版本,具有聚合和依赖关系

    我正在努力解决如何crossScalaVersions与子项目一起工作 我有一个使用 2 10 foo 编译的项目和一个使用 2 11 bar 编译的项目 他们共享一个交叉编译的项目 常见 如何编译项目 foo 和 bar 构建 sbt l
  • 使用 Kotlin 协程处理阻塞代码的正确方法

    假设我由于某些第三方库而具有阻塞功能 沿着这些思路 fun useTheLibrary arg String String val result BlockingLibrary doSomething arg return result 调
  • 在 CSV python 中添加列并枚举它

    我的 CSV 看起来像 John Bomb Dawn 3 4 5 3 4 5 3 4 5 我想在前面添加 ID 列 如下所示 ID John Bomb Dawn 1 3 4 5 2 3 4 5 3 3 4 5 使用枚举函数 但我不知道如何
  • 获取 URL 的一部分(正则表达式)

    给定 URL 单行 http test example com dir subdir file html 如何使用正则表达式提取以下部分 子域 测试 域名 example com 没有文件的路径 dir subdir 文件 file htm
  • Laravel 中如何将服务器时间转换为本地时间?

    我想打印 Laravel 当地时间 如果用户创建帖子 它将在服务器上显示创建时间 我怎样才能显示当地时间 在我的刀片文件中 我使用此代码来显示创建时间 posts gt updated at 它显示数据库中的时间 这是服务器时间 如何将其转
  • Android 上的 BouncyCastle

    我正在使用 PBEWITHSHA256AND256BITAES CBC BC 来加密包含敏感用户数据的二进制数据 我只是想确认 BouncyCastle 是否是 2 1 之后的每个 Android SDK 的一部分 因为我在一些网站上读到
  • 是否可以使用java代码监视文件夹?

    有谁知道如何使用java监控文件夹 或者任何人都可以给我一个观点 我该如何开始这个 这是我的想法 启动一个线程来扫描文件夹更改 这可能是创建 删除 更新此文件夹中的文件或发生其他情况 例如上次更新 但在这种情况下 你必须控制线程循环 如果这
  • 在 Windows 上使用 Python 将 SVG 转换为 PNG

    问题 哪个可重现的过程可以使 Windows Python 用户将 SVG 图像渲染为 PNG 许多问题 答案 例如在 Python 中将 SVG 转换为 PNG and python 中的服务器端 SVG 到 PNG 或其他图像格式 由于
  • JavaFX 和 Silverlight 的优缺点 [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 我知道已经有人对 Flex JavaFX 和 Silverlight 的性能有疑问 我的问题有点广泛 我们正在评估 JavaFX 和 Silverlight 作为控制 配置我们的后端服务
  • 我可以使用 CSS 更改 svg 路径的填充颜色吗?

    我有以下代码 span span