问题：

无法使用jQuery更改svg颜色

凌炜

2023-03-14

我在使用jquery或vanila javascript更改svg图像的颜色时遇到了问题。我尝试了一些方法，但似乎都不起作用，原始颜色是黑色的，如果我在IDE中打开svg图像并添加/更改填充属性，我可以更改它。但JS不行。我做错了什么？其他代码行工作正常，所以文件或其他文件没有问题。

到目前为止，我已经尝试了这几行代码，并将id放在img标签以及svg元素本身上

中文：

 <img src="import/splash.svg">

JS:

$('#myId').css({fill:"#f8b9d4"});

$("myId").attr("fill", "yellow");

document.getElementById("myId").setAttribute("fill", "#f8b9d4");

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" viewBox="0 0 588 497" version="1.1" 
xmlns="http://www.w3.org/2000/svg">
<title>random title</title>
<g>
<path
    d="M259.952694,496.613554 C253.376792,496.613554 250.627732,488.109987 250.038987,483.084288 L246.271494,450.855246 C245.492831,444.196255 243.408484,440.818093 240.070679,440.818093 C236.607054,440.818093 232.400376,443.96598 231.070952,445.174331 L199.957676,473.559913 C195.010319,478.077582 191.435117,480.178547 188.70505,480.178547 C187.190455,480.178547 185.884771,479.528079 185.020645,478.350589 C182.383162,474.756395 184.650306,466.661151 185.407603,464.263439 L192.935467,440.450127 C193.543204,438.531958 194.03699,435.934833 192.949711,434.446352 C191.893294,433.002977 189.478964,432.791694 188.135296,432.791694 C187.140602,432.791694 186.411793,432.903271 186.3382,432.91514 L127.318884,443.085236 C118.696618,444.573716 112.519544,442.940424 109.001317,438.313553 C103.842676,431.523993 106.712808,420.883851 106.838629,420.439918 "
    id="myId" fill=""></path>
</g>

UPDATE-创建了一个全新的项目，但问题是一样的。（div用于测试和正常工作）超文本标记语言：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<script src="tmo.js"></script>

</head>
<body>
<img src="splash.svg" alt="">
<div id="h"></div>

</body>
</html>

jquery：

$(document).ready(function () {

  $('#myId').css({fill:"blue"});
  $("#h").text("heasdadasdsadasdsad");

});

SVG文件:

<svg width="100%" viewBox="0 0 588 497" version="1.1"
 xmlns="http://www.w3.org/2000/svg">
<title>random title</title>
<g>
    <path
        d="M259.952694,496.613554 C253.376792,496.613554 250.627732,488.109987 250.038987,483.084288 L246.271494,450.855246 C245.492831,444.196255 243.408484,440.818093 240.070679,440.818093 C236.607054,440.818093 232.400376,443.96598 231.070952,445.174331 L199.957676,473.559913 "
        id="myId"></path>
</g>
</svg>

共有3个答案

后化

2023-03-14

Try This- 

$('#myId').css({fill:"blue"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="100%" viewBox="0 0 588 497" version="1.1"  
xmlns="http://www.w3.org/2000/svg">
<title>random title</title>
<g>
<path
    d="M259.952694,496.613554 C253.376792,496.613554 250.627732,488.109987 250.038987,483.084288 L246.271494,450.855246 C245.492831,444.196255 243.408484,440.818093 240.070679,440.818093 C236.607054,440.818093 232.400376,443.96598 231.070952,445.174331 L199.957676,473.559913 C195.010319,478.077582 191.435117,480.178547 188.70505,480.178547 C187.190455,480.178547 185.884771,479.528079 185.020645,478.350589 C182.383162,474.756395 184.650306,466.661151 185.407603,464.263439 L192.935467,440.450127 C193.543204,438.531958 194.03699,435.934833 192.949711,434.446352 C191.893294,433.002977 189.478964,432.791694 188.135296,432.791694 C187.140602,432.791694 186.411793,432.903271 186.3382,432.91514 L127.318884,443.085236 C118.696618,444.573716 112.519544,442.940424 109.001317,438.313553 C103.842676,431.523993 106.712808,420.883851 106.838629,420.439918 "
    id="myId"></path>
</g>
</svg>

史磊

2023-03-14

您的Jquery css工作正常。您不需要在路径上有空的fill=“”attribute。

注意：向下滚动代码段以查看结果，您的视图框有点大：）

$('#myId').css({fill:"blue"});

html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="100%" viewBox="0 0 588 497" version="1.1"  
xmlns="http://www.w3.org/2000/svg">
<title>random title</title>
<g>
<path
    d="M259.952694,496.613554 C253.376792,496.613554 250.627732,488.109987 250.038987,483.084288 L246.271494,450.855246 C245.492831,444.196255 243.408484,440.818093 240.070679,440.818093 C236.607054,440.818093 232.400376,443.96598 231.070952,445.174331 L199.957676,473.559913 C195.010319,478.077582 191.435117,480.178547 188.70505,480.178547 C187.190455,480.178547 185.884771,479.528079 185.020645,478.350589 C182.383162,474.756395 184.650306,466.661151 185.407603,464.263439 L192.935467,440.450127 C193.543204,438.531958 194.03699,435.934833 192.949711,434.446352 C191.893294,433.002977 189.478964,432.791694 188.135296,432.791694 C187.140602,432.791694 186.411793,432.903271 186.3382,432.91514 L127.318884,443.085236 C118.696618,444.573716 112.519544,442.940424 109.001317,438.313553 C103.842676,431.523993 106.712808,420.883851 106.838629,420.439918 "
    id="myId"></path>
</g>
</svg>

弘承业

2023-03-14

我会说这是因为你使用了<代码>

如果您不能将<代码>

<object id="img" data="test.svg" type="image/svg+xml">Your browsser doesn't support SVG</object>

然后，您可以访问

document.getElementById("img").contentDocument.getElementById("myId").setAttribute("fill", "#f8b9d4");

类似资料：

使用JQuery更改svg内的填充颜色[重复]

我有一个嵌入在“img src”标记内的SVG图像。svg 包含带有颜色的不同路径，每个路径由 id 分隔。我想使用 jquery 更改每个 id 中的填充颜色下面是我使用过的代码。但是颜色没有变化。通过大量搜索，我发现如果svg直接添加到html中，它就可以工作。一个工作示例：http://jsfiddle.net/P6t2B/ 但是如果是通过“img src”添加svg，我该如何实现呢？？
使用JavaScript更改SVG图像颜色

问题内容：我正在尝试使用javascript更改svg图像颜色。这可能吗？我可以将其加载为对象，然后以某种方式访问颜色/图像数据。每一个回应或提示都将受到高度赞赏！问题答案：当然，这是一个示例（省略了标准HTML样板）：
如何使用CSS更改SVG图像的颜色（jQuery SVG图像替换）？

问题内容：这是我想出的一小段代码的自我问答。当前，没有一种简单的方法可以嵌入SVG图像，然后可以通过CSS访问SVG元素。有多种使用JS SVG框架的方法，但是如果您要做的只是制作带有过渡状态的简单图标，它们将过于复杂。所以这就是我想出的，我认为这是迄今为止在网站上使用SVG文件的最简单方法。它的概念来自早期的文本到图像替换方法，但据我所知，从未对SVG进行过处理。这是问题：如何在不使用
使用CSS[duplicate]更改svg图像的颜色

我的html文件中有以下svg图像：现在，我试图改变颜色使用这个css代码：然而，一切都没有改变。使用css更改svg图像路径颜色的正确方法是什么？谢谢
更改img src SVG颜色[重复]

在这里，我尝试更改图像svg颜色。是否可以更改angular 5中按钮中svg图像的颜色
如何使用CSS（jQuery SVG图像替换）改变SVG图像的颜色？

这是我想出的一段方便的代码的自我问答。目前，还没有一种简单的方法来嵌入SVG图像，然后通过CSS访问SVG元素。使用JS SVG框架的方法多种多样，但如果您所做的只是制作一个带有滚动状态的简单图标，那么这些方法就过于复杂了。所以这里是我想出的，我认为这是迄今为止在一个网站上使用SVG文件的最简单的方法。它的概念来自早期的文本到图像的替换方法，但据我所知，SVG从来没有这样做过。这就是问题所在

无法使用jQuery更改svg颜色

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档