js - 动态更改SVG颜色

最新推荐文章于 2024-03-19 21:50:30 发布
VIP文章 最新推荐文章于 2024-03-19 21:50:30 发布
阅读量8.7k 收藏 9
点赞数 3
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44404237/article/details/112526033
版权

动态更改SVG颜色

今天设计问我一个问题，用户自定义颜色，根据不同的自定义颜色更改项目中的icon色系，是否能做到 - 能！

svg 代码的格式是这样的

 <?xml version="1.0" encoding="UTF-8"?>
<svg width="99px" height="88px" viewBox="0 0 99 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>编组</title>
    <g id="updateColor" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="空状态备份-5" transform="translate(-636.000000, -311.000000)"
最低0.47元/天 解锁文章
前端小白自救笔记
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Nuxtjs 项目使用 svg-sprite-loader 更改 svg 的颜色
老司机的后备箱
10-24 1373
由于一些原因，最新的公司项目要使用的技术切换到了Nuxt.js，也就是Vue的 ssr 服务端渲染框架。使用会让你的svg引入写起来非常的舒服，可以随意修改其颜色，就是配置起来稍稍麻烦一点。但对比开发体验来说，这点时间花费，是完全值得的！为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
vue-simple-svg:一个简单的Vue.js插件，可让您将SVG图像加载为嵌入式SVG，并可以更改其填充颜色
05-02
vue-simple-svg（V2） 一个简单的Vue.js插件，可让您使用动态加载.svg文件的组件作为嵌入式SVG，以便您可以轻松地以编程方式控制其样式。 无需jQuery。 当您只需要将SVG文件作为组件，建议在许多情况下使用 。 构建此插件是为了解决库不适合的其他一些情况，这些情况是： 动态加载SVG文件。 您不必在源代码中对文件名进行硬编码。 相反，您可以在渲染时指定它，甚至在渲染组件后也可以对其进行更改。 轻松地以编程方式更改SVG的填充颜色或描边颜色，并且无需全局CSS使用。 安装： $ npm install vue-simple-svg 用法： 在您的主文件中初始化 // as a plugin import VueSimpleSVG from 'vue-simple-svg' Vue . use ( VueSimpleSVG ) // or as a com
js操作自定义svg
09-30
这是14年写的一个操作自定义svg的js库，我们的应用场景是室内定位，需要自己用svg画室内图。 因为本身没学过js，所以请忽略各种不规范写法或其它等等。。 时隔两年，也不知道网络上是否有很好的操作库了，反正放出来吧。。 代码没有经过精简，没有剔除不相干的代码，所以看起来会比较费劲，有些需要猜测。。
svg修改颜色失败-解决svg 自带 fill 的问题
weixin_47192515的博客
08-28 7449
修改图标颜色失效，发现svg文件会自带一个 fill 属性，导致颜色修改失效。
js实现修改svg的颜色及尺寸
HGX-DJK
03-19 268
**修改svg尺寸*//**修改svg颜色*/
SVG或PNG图片颜色修改：JS 动态更改svg格式字符串的颜色、svg格式字符串转url、使用svg加载器svg-sprite-loader动态改变svg颜色、使用drop-shadow修改图片颜色
icemwj的博客
07-14 1795
SVG或PNG图片颜色修改：JS 动态更改svg格式字符串的颜色、svg格式字符串转url、使用svg加载器svg-sprite-loader动态改变svg颜色、使用drop-shadow修改图片颜色
【D3.js】1.16-更改 SVG 元素的颜色
qiebzps的博客
12-02 651
【D3.js】1.16-更改 SVG 元素的颜色至此，一个较为完整的rect图已经完成了，但是所有的rect都是黑色。more。
使用js动态设置svg的颜色和宽高
momo_mom177的博客
09-23 5054
使用js动态设置svg的颜色和宽高
svg修改不了颜色解决办法
Hiroshi's
03-05 1万+
今天自定义一个svg组件时候发现无论如何都无法通过css修改svg的颜色： 后来发现是因为svg文件里面的fill=xxx这段代码的原因 解决方法： 找到对应的svg文件，把这段代码删掉： 保存，就可以修改颜色了： ...
SVG图片颜色设置无效解决方法-前端
热门推荐
苍老师背后的男人
09-08 1万+
想让svg图片的颜色跟随父元素的color值变化，可先用编辑器打开svg图片文件，修改以下2点后保存即可： 在svg标签中加上 fill="currentColor" 在path标签中去掉 fill="..."，或者改为 fill="currentColor" 拿到的svg图片如果是自带颜色的，一般父元素的颜色设置就会无效，那么就需要修改以上2点。特别是第2点，因为path标签中的d=”..."很长，而 fill="..." 通常放在标签的末尾，容易看漏。 举个例子： //父元素设置red无.
使用 js 动态修改在线 svg 背景色
CSDN前端知识共享
09-19 728
由于网上搜了很多相关资料，都是介绍如何通过 js 修改本地 svg 资源。不过我们要求是要修改在线 svg 资源，因此，在一顿研究之后，封装了如下组件。
SVG动画vivus.js库使用小结(实例代码)
10-19
本文通过代码给大家介绍SVG动画vivus.js库使用小结，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
HTML5 SVG可变颜色动画标签栏(vue修改svg颜色)-HTML5代码JS特效代码
最新发布
04-28
HTML5 SVG可变颜色动画标签栏是一款好看的动画标签栏，菜单对应不同的颜色，点击每个图标时就会自动...HTML5 SVG可变颜色动画标签栏特征：适合动画标签,标签栏,SVG,HTML5, HTML5代码,前端开人员下载简单修改便可使用。
NN-SVG：可发布的NN体系结构示意图
02-03
NN-SVG提供了通过多种尺寸，颜色和布局参数根据用户喜好对图形进行样式设置的功能。 我希望该工具可以节省机器学习研究人员的时间，并且希望该软件在某些情况下也可以用作教学工具。引文勒尼尔（2019）。 NN-SVG：...
VUE-cli3使用 svg-sprite-loader
12-11
VUE-cli3使用 svg-sprite-loader ... 每个 SVG 图标都可以更改大小颜色 安装插件 npm install svg-sprite-loader --save-dev webpack 配置,在Vue.config.js加入处理 svg 的 loader： const path = require('pa
vue-svg-icon：vue2.0中多色svg图标的解决方案（vue2.0的可变彩色svg图标方案）
02-04
通过css'color'属性动态设置svg的一部分的颜色 一个很棒的SVG图标网站 用法 1.安装 npm install vue-svg-icon --save-dev 2.将您的svg放入src / svg / 现在不支持配置此目录 src文件夹应与node_modules位于同一...
用javascript控制svg的图片颜色
weixin_30439131的博客
11-13 1458
用javascript控制svg的图片颜色 SVG：(1.svg) <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/...
通过颜色选择器全局修改svg图片的颜色
weixin_46369590的博客
07-25 794
此篇文章是一个原生js的项目，要想动态修改图片的颜色，就需要用到svg格式的图片，可以给svg图片下的path设置样式fill为你选择的颜色，即可动态修改图片的颜色。
使用js动态更改svg颜色
04-11
可以使用 JavaScript 来动态更改 SVG 图像的颜色。你可以使用 JavaScript 获取 SVG 元素，并使用 SVG API 中的 setAttribute 方法来设置其 fill 或 stroke 属性的值。例如，要将 SVG 元素的颜色更改为红色，可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值