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

已于 2023-05-31 17:07:26 修改
阅读量372 收藏
点赞数
文章标签： 前端
于 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
    评论
解决svg中使用渐变色和阴影导致路径不显示的问题
花落微凉梦清幽的博客
12-08 1462
解决svg使用线性渐变色时不显示路径的问题
vue svg组件中svg图标颜色无法修改，解决方案！
weixin_49875932的博客
01-10 1685
1.原因是因为svg源文件中fill 设置了颜色，导致无法通过类名去修改。2.解决方案为 将fill设置为fill="currentColor"
android中到底支持SVG哪些标签
a594218234的博客
03-10 4059
背景介绍 我们都知道android中支持svg图片,但是到底支持到什么程度,哪些支持哪些不支持,这个问题最近让我反思了起来 根据经验来讲,android中是支持path,group等标签的,但是这两天在通过android studio转换svg成xml的时候遇到了一系列的问题,从png转换的svg图片在转换Vector Asset的时候无法转化,报错,不支持image等标签. 之前确实没有遇到过这个问题,于是在论坛上查了很多博客,但是没有一篇文章能说出来到底不支持哪些标签,支持哪些标签的(也有可能是我没找到
svg linearGradient渐变在line垂直的时候会失效
qq_46906053的博客
07-20 151
上下渐变：x1="0%" y1="0%" x2="0%" y2="100%"1、将位置偏移一点，效果不明显，几乎等于失效。2、改变渐变方向--推荐。
SVG:linearGradient渐变在直线上失效的问题解决方案
weixin_33701251的博客
10-25 350
SVG开发里有个较为少见的问题。 对x1=x2或者y1=y2的直线（line以及path），比如： &lt;path d="M200,10 200,100" stroke="url(#orange_red)"/&gt;   如果，stroke里使用的是渐变效果，那么，在各种浏览器上都会出现同一个BUG，这条线消失了。 原因不好排查，但是道理很简单，参考： www.w3.org ...
SVG渐变
myx20220713的博客
07-21 1228
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标
05-07
基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标基于iconpark的svg图标组件，可...
H5 SVG红色渐变菱形背景特效
07-14
线性渐变允许颜色从一个方向平滑过渡到另一个方向，可以是水平、垂直或任何角度，为菱形创造出独特的视觉冲击力。 菱形作为背景图案，打破了传统矩形布局的单调，增添了视觉上的新颖感。通过SVG，我们可以精确地...
delphi SVG组件库
06-17
总的来说，这个Delphi SVG组件库为Delphi开发者提供了一种简单且强大的方式来集成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`：布尔类型，如果...
如何在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元素设置渐变色时，设置角度，显示问题；
鲸落
08-18 497
前段时间做了一个需求，svg元素渐变，支持给svg元素设置线性渐变，径向渐变，设置渐变角度； 测试的过程中，发现一个问题： 当我把角度设置到90度时，线性渐变的显示就会有问题
SVG渐变效果
weixin_72101182的博客
07-18 540
SVG渐变效果
svg渐变不生效
weixin_30357231的博客
09-28 866
最近在用svg来画个折线图，发现在chrome下一切表现正常，safari下渐变不生效，经过一番查找，发现safari不支持rgba格式，需要改变透明度的话用stop-opacity代替。 转载于:https://www.cnblogs.com/cococe/p/9719526.html...
一篇文章带你了解SVG 渐变知识
pdcfighting的博客
11-06 802
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。 SVG渐变主要有两种类型：（Linear，Radial）。 一、SVG 线性渐变 元素用于定义线性渐变。 标签必须嵌套在的内部。标签是definitions的缩写，可对诸如渐变之类的特殊元素进行定义。 线性渐变可以定义为水平，垂直或角渐变。 /*y1和y2相等，而x1和x2不同时，可创建水平渐变。 当x1和x2相等，而y1和y2不同时，可创建垂直渐变。 当x1和x2不同，且y1和y2不同时，可创建角形渐变。*/实
SVG颜色、渐变和填充
weixin_30828379的博客
10-17 383
颜色 RGB和HSL都是CSS3支持的颜色表示方法，一般普遍使用是RGB。PS：HSL浏览器兼容。 RGB RGB即是代表红、绿、蓝三个通道的颜色，通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。 表示方式 取值范围 优点 缺点 rgb(r, g, b) [0, 255] 每个分量 显示器容...
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1059
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
最新发布
weixin_58540586的博客
07-04 843
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
写一个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、付费专栏及课程。

余额充值