多个SVG组件 渐变颜色失效问题

已于 2023-05-31 17:07:26 修改
阅读量388 收藏
点赞数
文章标签： 前端
于 2023-05-31 17:06:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49781990/article/details/130972839
版权
当页面上重复使用同一SVG组件时，发现组件的渐变颜色失效。问题在于所有组件共用了相同的ID。解决方法是动态拼接`stop`元素的ID，确保每个组件的ID唯一，从而恢复渐变效果。
摘要由CSDN通过智能技术生成

问题：页面重复使用同一SVG组件，渐变颜色失效

svg组件：

 <svg :id="id" class="icon signal-icon" width="20px" height="20px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path fill="url(#linear)" d="M0 704h208v192H0zM272 512h208v384H272zM544 288h208v608H544zM816 128h208v768H816z" />
      <defs>
        <linearGradient id="linear">
          <stop offset="0%" :stop-color="setColor(offset,'0%')"/>
          <stop offset="25%" :stop-color="setColor(offset,'25%')"/>
最低0.47元/天 解锁文章
ho-J
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
H5 SVG红色渐变菱形背景特效
07-14
线性渐变允许颜色从一个方向平滑过渡到另一个方向，可以是水平、垂直或任何角度，为菱形创造出独特的视觉冲击力。 菱形作为背景图案，打破了传统矩形布局的单调，增添了视觉上的新颖感。通过SVG，我们可以精确地...
delphi SVG组件库
06-17
总的来说，这个Delphi SVG组件库为Delphi开发者提供了一种简单且强大的方式来集成SVG图形，使得他们能够在跨平台的应用程序中实现高质量的矢量图像显示。通过深入研究源码和使用提供的帮助文档，开发者可以充分利用...
解决svg中使用渐变色和阴影导致路径不显示的问题
花落微凉梦清幽的博客
12-08 1497
解决svg使用线性渐变色时不显示路径的问题
svg元素设置渐变色时，设置角度，显示问题；
鲸落
08-18 511
前段时间做了一个需求，svg元素渐变，支持给svg元素设置线性渐变，径向渐变，设置渐变角度； 测试的过程中，发现一个问题： 当我把角度设置到90度时，线性渐变的显示就会有问题
SVG渐变效果
weixin_72101182的博客
07-18 545
SVG渐变效果
SVG:linearGradient渐变在直线上失效的问题解决方案
weixin_33701251的博客
10-25 357
SVG开发里有个较为少见的问题。 对x1=x2或者y1=y2的直线（line以及path），比如： &lt;path d="M200,10 200,100" stroke="url(#orange_red)"/&gt;   如果，stroke里使用的是渐变效果，那么，在各种浏览器上都会出现同一个BUG，这条线消失了。 原因不好排查，但是道理很简单，参考： www.w3.org ...
vue svg组件中svg图标颜色无法修改，解决方案！
最新发布
weixin_49875932的博客
01-10 1808
1.原因是因为svg源文件中fill 设置了颜色，导致无法通过类名去修改。2.解决方案为 将fill设置为fill="currentColor"
android中到底支持SVG哪些标签
a594218234的博客
03-10 4091
背景介绍 我们都知道android中支持svg图片,但是到底支持到什么程度,哪些支持哪些不支持,这个问题最近让我反思了起来 根据经验来讲,android中是支持path,group等标签的,但是这两天在通过android studio转换svg成xml的时候遇到了一系列的问题,从png转换的svg图片在转换Vector Asset的时候无法转化,报错,不支持image等标签. 之前确实没有遇到过这个问题,于是在论坛上查了很多博客,但是没有一篇文章能说出来到底不支持哪些标签,支持哪些标签的(也有可能是我没找到
基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标
05-07
基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标基于iconpark的svg图标组件，可...
delphi SVG组件库 - Sydney.rar
07-02
3. **Common**：公共模块通常包含一些通用的函数和类，这些是多个组件共享的。它们可能包括颜色管理、几何变换、事件处理等跨组件的功能。通过复用这些公共组件，开发者可以减少代码重复，提高代码质量和效率。 4. ...
在 Vue 中编写 SVG 图标组件的方法
10-15
1. **创建 Svg-icon 组件**：首先，我们需要创建一个新的 Vue 组件文件 `Svg-icon.vue`。在这个组件中，我们将定义三个 prop： - `icon`：接收一个字符串，表示 SVG 图标的文件名。 - `hasFill`：布尔类型，如果...
svg linearGradient渐变在line垂直的时候会失效
qq_46906053的博客
07-20 163
上下渐变：x1="0%" y1="0%" x2="0%" y2="100%"1、将位置偏移一点，效果不明显，几乎等于失效。2、改变渐变方向--推荐。
flutter 显示svg图片，动态改颜色大小
lqw200931116的博客
03-16 4975
在项目中，图标会根据情况的不同，动态改变颜色和大小，使用svg，可以减少资源文件导入，flutter中使用svg，需用到flutter_svg 1、在pubspec.yaml引入flutter_svg flutter_svg: ^1.0.3 2、导入svg 把svg文件导入asset目录下 并在pubspec.yaml添加svg对应的目录 assets: - assets/images/tab/ 记得执行 flutter pub get 3、使用 引入文件 imp.
SVG图片颜色设置无效解决方法-前端
热门推荐
苍老师背后的男人
09-08 1万+
想让svg图片的颜色跟随父元素的color值变化，可先用编辑器打开svg图片文件，修改以下2点后保存即可： 在svg标签中加上 fill="currentColor" 在path标签中去掉 fill="..."，或者改为 fill="currentColor" 拿到的svg图片如果是自带颜色的，一般父元素的颜色设置就会无效，那么就需要修改以上2点。特别是第2点，因为path标签中的d=”..."很长，而 fill="..." 通常放在标签的末尾，容易看漏。 举个例子： //父元素设置red无.
SVG渐变
myx20220713的博客
07-21 1233
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
Vue项目中使用svg图标 关于vue-svg-icon的使用方式
weixin_43173924的博客
06-26 5978
1.Vue项目中使用svg图标: https://www.cnblogs.com/shenyf/p/10370949.html 2.关于vue-svg-icon的使用方式 https://www.jianshu.com/p/eabbd5a32b54
WPF 关于同一张图片如何多次显示问题
Mr_WTX的博客
05-31 212
/// 将图片存入内存流解决图片资源问题 /// </summary> /// <param name="imagePath"></param> /// <returns></returns> public BitmapImage GetBitmapImage() { string imagePath = UtileTool.getAppPat...
如何在vue中优雅地使用v-if判断
铁锤妹妹的博客
07-28 1万+
情况一：做vue项目，有的时候会遇到有几个元素都使用同一个v-if条件。 下面这种方法虽然可以实现，但是整体代码看起来有点笨拙，我们可以用<template>标签进行优化一下。 <template> <div class="card"> <img src="../../assets/image/background frame.png" /> <h3 v-if="expanded">123</h3> &lt
svg渐变不生效
weixin_30357231的博客
09-28 870
最近在用svg来画个折线图，发现在chrome下一切表现正常，safari下渐变不生效，经过一番查找，发现safari不支持rgba格式，需要改变透明度的话用stop-opacity代替。 转载于:https://www.cnblogs.com/cococe/p/9719526.html...
写一个svg 圆颜色渐变动画
05-28
好的，以下是一个简单的SVG圆形颜色渐变动画代码示例： ```html <svg width="200" height="200"> ;stop-opacity: 1" /> ;stop-opacity: 1" /> (#grad)"> ;#00ffff;#ff00ff" dur="5s" repeatCount=...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值