Svg在html <img>标记中显示错误的颜色
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，用于在Web上显示图形。与传统的位图图像（如JPEG、PNG）相比，SVG图像是基于数学描述的，因此可以无损地缩放和调整大小，而不会失真。
在HTML的<img>标记中，SVG图像可以通过src属性引用并显示在网页上。然而，有时候SVG图像在<img>标记中显示的颜色可能会出现错误。这通常是由于SVG图像中使用了CSS样式或内联样式，而<img>标记无法正确解析这些样式导致的。
要解决这个问题，可以采取以下几种方法：
- 直接在<img>标记中嵌入SVG代码：将SVG代码直接嵌入到<img>标记的src属性中，而不是引用外部的SVG文件。这样可以确保SVG图像中的样式能够正确地应用。
- 使用<object>标记嵌入SVG图像：使用<object>标记可以更好地支持SVG图像的显示和样式。在<object>标记中，可以使用<embed>或<iframe>元素引用SVG文件，并通过设置type属性为"image/svg+xml"来指定SVG图像的类型。
- 使用CSS样式修复颜色问题：如果SVG图像中的颜色显示错误，可以使用CSS样式来修复。可以通过在<img>标记或SVG代码中添加内联样式或外部样式表来修改颜色属性，例如fill和stroke。
总结起来，SVG在HTML的<img>标记中显示错误的颜色可能是由于样式解析问题导致的。可以通过直接嵌入SVG代码、使用<object>标记或修复CSS样式来解决这个问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（移动推送、移动分析等）：https://cloud.tencent.com/product/mobile
- 腾讯云数据库（MySQL、MongoDB等）：https://cloud.tencent.com/product/cdb
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云视频处理（点播、直播等）：https://cloud.tencent.com/product/vod
- 腾讯云音视频通信（TRTC）：https://cloud.tencent.com/product/trtc
- 腾讯云元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc
相关·内容
2回答
使用CSS在悬停时转换SVG路径的填充属性
css、svg、hover、css-transitions
我在页面上的object标签中包含了一个SVG图像文件，如下所示：
<object type="image/svg+xml" data="linkto/image.svg">
<!-- fallback image in CSS -->
</object>
有问题的图像是世界地图，我想在鼠标悬停在group上时转换fill属性，在本例中，我按大陆对我的SVG进行了分组，因此南美洲看起来如下所示：
<g id="south_america">
<path fill="#FA
浏览 1提问于2013-11-16得票数 75
回答已采纳
3回答
为什么CSS不对SVG进行样式化？
html、css、svg
我在一个对象标记中嵌入了一个SVG图像，我正试图用CSS对其进行样式化。SVG显示在页面上，但CSS中的更改没有任何作用。我想我可能对如何将CSS链接到HTML有问题。我不想在HTML内部链接CSS。为什么SVG不继承CSS样式？
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<?xml-stylesheet type="text/css" href=&#
浏览 6提问于2014-03-01得票数 2
回答已采纳
1回答
录屏直播错误码5801如何解决？
官方文档、云直播
请描述您的问题
标题：录屏（ReplayKit） - 移动直播 - 文档首页 - 腾讯云文档平台 - 腾讯云
地址：https://cloud.tencent.com/document/product/454/7883
你好，我们app集成了录屏直播功能。现在调用[RPBroadcastActivityViewController loadBroadcastActivityViewControllerWithHandler:^(RPBroadcastActivityViewController * _Nullable broadcastActivityViewController, NSEr
浏览 1005提问于2018-03-16
6回答
如何在Angular中更改svg元素的颜色？
css、angular
我需要在我的Angular项目中通过应用不同的CSS类来加载、显示和动态更改SVG图像的颜色。 这个问题没有帮助，因为它使用了现代程序库，我想避免它。我也不想复制d字段中的path标签直接放在Angular项目的html文件中，因为这将是一堵我不愿意接受的文字墙。相反，我可以接受使用外部专用库来实现正确的结果，比如 ng-inline-svg,我尝试通过以下方式使用它：无视以下CSS类： .svg1 {
color: green;
} 它完美地将图像加载为常规的img标记，但如果我随后尝试对其应用自定义类来更改图像颜色，它将不起作用。 此外，我尝试通过以下方式使用object标记： 但是
浏览 242提问于2019-12-12得票数 4
回答已采纳
1回答
SCF 中 Policy策略如何正确输入？
云函数、访问管理、serverless、编程算法、测试策略
Policy
必填： 是.
类型： String.
描述：
授予该临时证书权限的CAM策略 注意： 1、策略语法参照 CAM 策略语法。 2、策略中不能包含 principal 元素。 3、该参数需要做urlencode。
文档中策略为JSON格式，这里要求String。还是如下？？这样的JSON就不能用腾讯云的在线代码生成了
{
"version": "2.0",
"statement": [
{
"principal": {
"qcs": [
浏览 207提问于2021-02-02
3回答
智能联想的使用示例呢？详见API/SDK使用？？ 没有啊，示例代码也没有？
云 API、官方文档
智能联想的使用示例呢？详见API/SDK使用？？ 没有啊，示例代码也没有
标题：智能联想 - 云搜 - 文档首页 - 腾讯云文档平台 - 腾讯云
地址：https://cloud.tencent.com/document/product/270/1201
浏览 422提问于2018-03-13
1回答
用<object>改变嵌入的SVG的颜色
javascript、html、css、svg
我在StackOverflow上只找到了一个解决方案，但是用户说它对他们不起作用。
因此，我将SVG图像嵌入到html中：
<object id="help-center" type="image/svg+xml" data="assets/help_center.svg">
</object>
在这种情况下，我不知道如何在悬停时改变颜色。
在这个片段中， SVG就在HTML内部，并在悬停时成功地改变了颜色。怎么做同样的事？
浏览 2提问于2017-10-01得票数 4
回答已采纳
2回答
如何在活动状态下更改svg图像的颜色？
css、image、svg、image-processing、hover
我使用img元素中的src属性导入svg。
例如：<img src="/images/home.svg" />
我有两种家庭形象。在正常情况下使用的home.svg和在本地链路激活时使用的homeActive.svg。除了颜色不同，这两张图片完全相同。
目前，我使用if语句动态地显示一个图像，覆盖另一个图像。有没有什么方法可以让我在不加载两种图像的情况下改变颜色。
浏览 4提问于2020-09-07得票数 1
1回答
如何保证硬盘中的数据安全？
云硬盘、数据安全、存储
云服务的基础依赖于硬件的设施，如硬盘等存储设备。当腾讯云的硬盘发生故障时，可能会需要进行替换或退役，那么在以下两种场景中，如何保证硬盘中的数据安全？
硬盘返厂维修并置换新硬盘；
硬盘无法使用，失去维修价值，决定销毁。
浏览 745提问于2020-03-09
2回答
使用css控制svg的大小和颜色
html、css、svg
我辛苦地创建了一个搜索图标，并将其导出为svg。这现在出现在一个网站的标题上，但我试图让css控制它的大小和颜色，这样我就可以对图标进行相应的大小调整，与网站上的文本颜色相匹配，并且当用户在图标上滚动时，我也会有某种滚动颜色的改变或亮/变黑。我不想使用内联svg，但我很乐意使用下面的img或对象技术。
<a href="#" onClick={this.onSearchClick} title="Search site">
<img src="//example-image-server/i/search_classic.svg"
浏览 7提问于2017-12-13得票数 1
回答已采纳
1回答
更改svg图像颜色的简单方法？
css、image、svg、colors、fill
我正在用AI做SVG图像，并将它们插入HTML中，如下所示：
<img class="animal_img" src="images/logos/bird.svg"/>
这门课看起来如下：
.animal_img {
margin-left: 0px;
margin-top: 0px;
width: 192px;
}
类只“定位”图像。
目前，我在AI中改变颜色，然后再上传它。但是，通过CSS来改变它是否更容易呢？有没有办法在类中插入更多的代码，让它决定下垂图像的颜色/填充？
谢谢你，马特
PS对这个论坛相当新，所以我希望我的问题正确等等。:-)
浏览 3提问于2016-05-22得票数 0
回答已采纳
3回答
是否可以使用css设置外部svg文件的样式？
css、html、svg
是否可以在不修改svg文件内容的情况下使用css设置外部svg文件的样式？
<img src="image/svg/3ds-max.svg">
有没有更好的方法在html5中显示外部svg文件？
浏览 0提问于2012-01-31得票数 11
回答已采纳
1回答
Iphone不会在图像标签中显示svg图像
iphone、svg、image
我正在尝试通过使用img标签来获取图像格式的svg，以便在iphone上显示。它适用于所有现代浏览器，当我将浏览器大小缩小到移动视图时，可以在浏览器中调整大小。
问题是它不能显示在iphone上。我试过使用embed标签，图像确实显示了，但不会拾取css来响应大小调整。
这是我尝试过的两种方法。
<img src="img/bg1.svg" />
<embed src="img/bg1.svg" type="image/svg+xml" />
我在illustrator中构建并保存了图像，并使用svg tiny 1.1设
浏览 0提问于2013-01-28得票数 0
回答已采纳
1回答
GitHub自述文件中的SVG currentColor不工作？
css、github、svg
我正在尝试使SVG颜色与GitHub自述文件中周围文本的颜色相匹配。(如果将文本设置为"fill=black"，则在GitHub的暗模式下几乎看不到它。)
从中，我猜我可以使用
fill="currentColor"
若要获取最近(周围) CSS元素的color属性，请执行以下操作。我用SVG尝试过，它显示一个简单的圆圈：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="-500 -50
浏览 1提问于2021-04-25得票数 1
我刚被告知用svg图像替换img标记，将svg标记替换为用标签，它现在以错误的颜色显示图像，并破坏了css (它需要一个相当奇怪的相对位置)。为什么在xlink中使用svg标记？通过使用带有xlink的svg标记，我们得到了什么？
<img class='my-image' src='blah.svg' />
是原始代码。
<svg class='my-image'>
<use xlink:href='#blah'></use>
</svg>
是新密码。它改变了图
浏览 0提问于2018-10-18得票数 0
回答已采纳
3回答
根据SVG对象的父html标记，我希望改变它的路径颜色。这可以用SVG来完成吗？例如，如果徽标在页眉中，我希望它是红色的，如果它在页脚中，我希望它是蓝色的。下面是一个例子：
<style type="text/css">
#header-img {
fill:blue;
}
#footer-img {
fill:black;
}
</style>
...
<header>
<object id="header-img" type="image/svg+
浏览 3提问于2012-09-25得票数 0
回答已采纳
2回答
如何使用链接到SVG文件内的图像元素？
html、css、svg
我尝试这样添加我的SVG：
<svg>
<image class="logo" src="facebook.svg"/>
</svg>
为什么不起作用？这个SVG文件的方式是正确的。当然，我可以用img或background添加我的SVG，这样就更容易了。但我认为这是最好的选择，因为我需要改变我的SVG图像的颜色。
浏览 2提问于2020-08-15得票数 1
回答已采纳
1回答
将svg显示为外部url中的图像
javascript、html、image、svg、uikit
我有一个包含svg文件的Firebase存储桶。每个文件的urls都存储在Firestore中。我从火药库中获取urls，以便在html中将svgs显示为图像。我使用普通HTML、CSS和JS，并使用UIKit进行布局。
我所说的“将svgs显示为图像”的意思是：
我希望用户能够右键单击，并单击“保存图像为”。
我不希望我的CSS以任何方式影响svgs。
我不需要以编程的方式操作SVG。
我正在使用UIKit，并尝试了他们两种显示svgs的文档化方法：
方法1:作为一个
var source = logo.imageURL;
var div = document.crea
浏览 4提问于2021-02-17得票数 0
回答已采纳
3回答
带有外部图像的SVG在浏览器中嵌入<img>标签时不会加载它们。
svg、same-origin-policy
我做了以下观察：
如果我通过xlink:href创建引用外部光栅图像的svg图像，并尝试在浏览器中加载该svg，则仅当我使用<object>标记时才显示外部图像，而在使用<img>标记时则不显示。
使用<object>标记渲染非常慢，而且不如使用图像的img标记清晰，所以我想知道是否有一种方法可以通过<img>标记使其工作。
起初我认为它不工作，因为同源策略，但即使引用的图像在相同的目录中，我只通过它的名称引用它，它不会加载。
有什么想法吗？
浏览 20提问于2010-05-01得票数 4
1回答
如何应用多种颜色角9
html、css、angular
我在按钮中使用ngFor，在那里我从数据中得到了4个结果，并期望在HTML4中有4个按钮。如何为这个按钮应用4种不同的颜色？
P.S.
我只使用Object.values从obj获取链接，并在this.img中分配colors，在this.img中，当单击4个按钮中的一个按钮时，使用它来显示每个图像。这就是为什么我需要申请每个按钮的背景色。
<div class="col-md-4 col-lg-4">
<img [src]="img">
</div>
<div>
浏览 1提问于2020-05-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
