How to change group color of svg from jquery

Question

I have a svg image rendered on the browser like below.

<img src="../path/to/img/logo.svg"/>

Inside that logo.svg, the structure is like below.

<svg id="logo" width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">

    <g id="part-1">
        <path d="..." />
        <path d="..." />
    </g>

    <path d="..." fill="red" />
    <path d="..." fill="red" />
</svg>

I want to change part-1 text-color (fill) from jquery. How can I do that?

Does this answer your question? [How to change the color of an svg element?](https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element) — Reporter, Jun 09 '22 at 07:28
So you don't have access to the file apart from the tag in the HTML document? — qrsngky, Jun 09 '22 at 07:47
**You can't change svg properties (e.g fill) in `` elements:** [img src SVG changing the styles with CSS](https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css). You need to either inline them directly in your body or use an external `` element as described by [@northamerican](https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css#51664058) — herrstrietzel, Jun 09 '22 at 16:21
It's possible to fetch the file, then build an svg dom using a parser, then change properties within that dom, then convert the result to data uri, then replace the source in — qrsngky, Jun 10 '22 at 04:02

Reporter · Answer 1 · 2022-06-09T08:21:37.497

0

Based on How to change the color of an svg element? at answer with fore downvotes:

$('#logo > #part-1 > path').attr("fill", "white");

See also https://jsfiddle.net/reporter/zd92oahp/5/

edited Jun 09 '22 at 08:21

answered Jun 09 '22 at 07:48

Reporter

3,897
5
33
47

How to change group color of svg from jquery

1 Answers1