Unable to change svg colour using jQuery

198
March 20, 2018, at 4:21 PM

I'm having trouble changing the colour of an svg image with jquery or vanila javascript. I've tried a couple of things but nothing seems to work, the original colour is black and i can change it if i open the svg image in my IDE and add/change the fill attribute. But not with JS. What am I doing wrong? Other lines of code work fine so it is not a problem with the files or so.

So far i've tried these lines of codes and put id on the img tag aswell as the svg element it self

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 - created a completley new project but the problem is the same. (The div is for testing and working fine) 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 file:

<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

I'd say it's because you're using an <img> tag rather than putting the <svg> directly in the HTML.

If you cannot put the <svg> directly in your HTML, embed it using the <object> tag, e.g. like this:

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

Then, you can access elements inside the <object> like this:

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

Your Jquery css works fine. You don't need to have an empty fill="" attribute on the path.

Note: Scroll down on the code snippet to see result, your viewbox is a bit big :)

$('#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>

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>
Rent Charter Buses Company
READ ALSO
dragging a dropped element back to its original container

dragging a dropped element back to its original container

so this is what I have till now (I am working with third party example)

153
How to display multiple contents as marquee one after another? Second content should take some time to display

How to display multiple contents as marquee one after another? Second content should take some time to display

I have two different contents, I want to show the contents as marquee in single line and the contents should display one after another with some delay time duration

180
Jquery/js specific time with minutes

Jquery/js specific time with minutes

Hello i'm making a simple jquery function that keep track of what time it is and either displays if the shop is open or closed by changing the display property of my div

178
ul&gt;li&gt;ul&gt;li&gt;ul&gt;li so i want to add style only on first li inside of that li&#39;s i don&#39;t want to add those style, how? via js [on hold]

ul>li>ul>li>ul>li so i want to add style only on first li inside of that li's i don't want to add those style, how? via js [on hold]

ul>li>ul>li>ul>li so i want to add style only on first li inside of that li's i don't want to add those style, how?

135