SVG路径“fill”的颜色超出预期
SVG路径中的"fill"属性用于指定路径的填充颜色。当"fill"属性的颜色超出预期时，可能是由于以下几个原因：
- 颜色值错误：检查"fill"属性的颜色值是否正确。SVG支持多种颜色表示方式，包括十六进制值（如"#FF0000"表示红色）、RGB值（如"rgb(255, 0, 0)"表示红色）和预定义颜色名称（如"red"表示红色）。确保颜色值正确无误。
- 元素嵌套错误：在SVG中，路径可以由多个子路径组成，每个子路径可以有自己的"fill"属性。如果路径的子路径之间存在重叠或嵌套关系，可能会导致填充颜色超出预期。检查路径的子路径是否正确嵌套或分离。
- 路径方向错误：SVG路径可以是顺时针或逆时针方向的闭合路径。当路径方向错误时，填充颜色可能会超出预期。确保路径的方向正确，可以通过调整路径的方向或使用"fill-rule"属性来解决。
- 路径交叉错误：如果路径中存在交叉或重叠的部分，填充颜色可能会超出预期。检查路径是否存在交叉或重叠，并进行必要的修复。
- 渲染顺序错误：SVG中的元素渲染顺序是从上到下的，后面的元素会覆盖前面的元素。如果填充颜色超出预期，可能是因为路径的渲染顺序不正确。检查路径的渲染顺序，并根据需要进行调整。
总结起来，当SVG路径的"fill"属性的颜色超出预期时，需要检查颜色值、元素嵌套、路径方向、路径交叉和渲染顺序等因素，以找出并解决问题。在腾讯云的产品中，可以使用腾讯云的SVG图像处理服务（https://cloud.tencent.com/product/tci）来处理SVG路径中的填充颜色问题。
相关·内容
1回答
我有一个定义为SVG路径的形状，我想用纯色填充它。路径本身看起来是正确的，并且stroke遵循我想要的形状。但是，当我将fill属性从none更改为一种颜色时，该颜色会溢出我定义的曲线，并创建一个矩形形状和一个斑点。在这些示例中，我使用了一个内联SVG属性，但是我使用style样式填充<path>得到了相同的结果。
<p>But '<
浏览 3提问于2019-07-15得票数 2
回答已采纳
6回答
如何在Angular中更改svg元素的颜色？
css、angular
我需要在我的Angular项目中通过应用不同的CSS类来加载、显示和动态更改SVG图像的颜色。 这个问题没有帮助，因为它使用了现代程序库，我想避免它。我也不想复制d字段中的path标签直接放在Angular项目的html文件中，因为这将是一堵我不愿意接受的文字墙。相反，我可以接受使用外部专用库来实现正确的结果，比如 ng-inline-svg,我尝试通过以下方式使用它：无视以下CSS类： .svg1 {
colo
浏览 242提问于2019-12-12得票数 4
回答已采纳
1回答
使用vips在图像上添加svg路径
svg、vips
我想在我的图像上添加svg路径。我实现了下面的代码，但它并没有给我预期的输出。问题是如何根据实际图像的高度和宽度设置svg路径。我尝试使用调整大小和缩略图，但它没有给我预期的输出。此外，我想填补灰色的颜色，在我的实际图像块，如在预期输出图像。使用imagick生成的预期输出图像
$background = Vi
浏览 3提问于2020-09-16得票数 0
1回答
无法重置svg路径的填充颜色？
javascript、jquery、css、svg
我在我的应用程序中使用svg，我需要在svg路径中使用类。类运行良好，但我不能使用fill动态更改svg路径的setAttribute颜色。码演示：这里是演示
如果带有类的路径，如何动态地更改svg
浏览 9提问于2013-11-08得票数 1
回答已采纳
1回答
有没有办法编辑从我计算机上的不同文件夹调用的带有CSS的svg？
javascript、html、css
在我的代码中，我有一个美国地图的SVG。一旦单击了某个特定的州，该国家/地区就会淡出，然后该特定州的单独SVG就会淡入。所有50个单独的州都在一个单独的文件夹中，并按如下方式进行检索：$(document).ready(function(){ var state = &qu
浏览 1提问于2018-06-21得票数 0
1回答
通过与外部类名相关的CSS设置内联SVG填充颜色
html、css、svg
我想在html页面上多次加载SVG，并将路径的颜色更改为与svg外部的类相关的不同值： .red svg path {}
} 但是is不起作用。所有路径都具有页面上第一个svg的颜色。 为什么会这样，在一个页面上有相同的
浏览 10提问于2020-01-06得票数 0
回答已采纳
1回答
如何在css中取消设置填充颜色
html、css、wordpress、svg、fill
所以我有了这个很棒的编码主题(就像wordpress上的一样)，并且为了解决一个bug，它不能像预期的那样显示svg，我通过html将它插入到functions.php中。这一切都很好，如果不是svg是由不同的颜色组成的，并且有一个来自主题的css类，它故意为svg的整个填充参数着色，如下所示：fi
浏览 17提问于2020-03-10得票数 0
2回答
使用CSS在悬停时转换SVG路径的填充属性
css、svg、hover、css-transitions
我在页面上的object标签中包含了一个SVG图像文件，如下所示： <!-- fallback image in CSS -->有问题的图像是世界地图，我想在鼠标悬停在group上时转换fill属性，在本例中，我按大陆对我的
浏览 1提问于2013-11-16得票数 75
回答已采纳
1回答
如何通过CSS更改SVG路径的填充颜色
css、svg
我知道，我们可以使用CSS /当原始SVG添加到HTML页面时，更改SVG路径的fill颜色。示例:这个fill示例不起作用，因为我在img标记中引用svg。 ...<style&g
浏览 0提问于2014-04-22得票数 2
回答已采纳
2回答
悬停样式的组件，更改子图标的颜色
reactjs、react-native
我想要创建一个按钮内有一个图标，这样当我悬停，图标和按钮的颜色改变。我试过这样做，但只改变了按钮的颜色： export const InsideIcon= ({ color, ...props }: MyIconSvgFile): JSX.Element=> (
<svg width="16" height="14" viewBox="0 0 16 14" fill="none"
浏览 2提问于2022-04-26得票数 0
5回答
设置SVG材质设计图标的背景色
css、svg、sprite-sheet、material-design
我使用下面描述的方法使用Material Design Icons：
但是，图标总是以黑色结尾。我该怎么改变他们的颜色，比如说变成白色？我知道可以对SVG源代码进行编辑以达到效果的可能性，但这似乎不是规范的方法。根据颜色的不同，material design icons存储库有不同版本的CSS图像精灵，而SVG只有一种颜色(实际上没有颜色，因为SVG代码中没有提
浏览 0提问于2014-11-13得票数 13
1回答
使用CSS设置jsPlumb轮廓的样式
css、jsplumb
我们使用“通过css设置样式”来设置连接器的样式，但是css中的颜色似乎覆盖了轮廓颜色和连接器颜色。我们使用的选择器如下所示： stroke: lightgray; stroke-width: 3; stroke: gray;
fill</e
浏览 2提问于2015-02-24得票数 0
1回答
如何在反应中更改svg图标颜色？
reactjs、svg
Svg文件： <circle cx="93" cy="93" r="88" stroke="#4285F4&
浏览 1提问于2021-03-02得票数 0
回答已采纳
1回答
在d3中单击返回到路径样式的颜色，选择(此)
javascript、jquery、d3.js
我使用d3.select(this).style('fill', 'red');是为了在用户单击svg path时改变颜色。颜色会发生变化，但当我单击新路径时，我希望将svg path颜色更新为旧颜色。这是我使用的函数： d3.select(this).style('fill&#
浏览 3提问于2016-09-29得票数 4
回答已采纳
1回答
CssLint :未知属性“填充”
css、svg、csslint
我正在通过css更改SVG路径颜色： fill: #fff;它运行得很好，但是在运行cssLint时，我收到了以下警告：这是cssLint错误吗？或者在css中使用这个属性来更改SVG路径的属性是件坏事吗？
浏览 2提问于2014-10-12得票数 5
回答已采纳
1回答
反应，反应-svg。如何还原原色
css、reactjs、svg
我有一组不同颜色的.svg图标，用于不同的路径。现在，我希望将所有路径颜色更改为灰色，并通过用户悬停将所有原始颜色带回，我正试图通过以下操作在我的scss中实现这一点： path, fill: #888; }
&:hover
浏览 3提问于2021-04-14得票数 1
回答已采纳
3回答
如何在ionic 4中更改自定义svg图标的颜色？
ionic-framework、ionic4
我想在单击按钮时更改自定义svg图标的颜色 <ion-icon src="../../assets/img/icon-qr.svg"></ion-icon></ion-item>
浏览 6提问于2019-10-21得票数 7
1回答
在svg中用透明路径重叠彩色rect /在交叉口上用路径填充颜色
html、svg、path、transparency
我有一个类似的代码，由一个动态内容创建工具生成，即该工具的用户将选择他想要的颜色。当rect被着色，但是路径的内部是透明的时，就会出现问题，因此rect的颜色将填充路径中的所有部分。这样做的目的是显示正确颜色的rect，但避免在路径的内部部分透明时着色，而是可以显示该透明部分后面的潜在对象。
<svg
浏览 2提问于2019-09-16得票数 1
回答已采纳
1回答
尝试实现svg:clipPath，但结果几乎是空白屏幕
javascript、d3.js
var w = 725;
.attr("width", w)我希望将区域限制到的路径，但元素已消失
svgcanvas.append("svg:clipPath", "
浏览 2提问于2012-10-02得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
