Question

我无法使用jquery或vanila javascript更改svg图像的颜色。我尝试了几件事，但似乎什么都没有用，原来的颜色是黑色的，如果我在IDE中打开svg图像并添加/更改fill属性，我可以更改它。但不是JS。我究竟做错了什么？其他代码行工作正常，因此文件不是问题。

到目前为止，我已经尝试过这些代码行并将id放在img标签以及它自己的svg元素上

HTML：

 <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用于测试和正常工作） HTML：

<!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>

Answer 1

你的Jquery css运行正常。您不需要在fill=""上设置空的path属性。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我想这是因为您使用的是<img>代码，而不是直接将<svg>放入HTML中。

如果您无法将<svg>直接放入HTML中，请使用<object>标记对其进行嵌入，例如像这样：

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

然后，您可以访问<object>内的元素，如下所示：

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

Answer 3

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>

无法使用jQuery更改svg颜色

3 个答案: