CODEWITHSUNDEEP
csscss-animations
Keith
Keith

Reputation: 4147

Change path elements in a SVG

I have a large SVG with path's inside that I want to manipulate. From what I've read, you just need to add a style tag and change it there, but this isn't happening. How can you change path elements?

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.6 27.31">
<defs><style>.cls-1{fill:#669143;}</style></defs>
<title>world_pedals</title>
<path class="cls-1" d="M176.89,49.13c3.79,4.81,10.47.51,12.06-.68-1.59-1.19-8.21-5.66-12.06-.73a2.28,2.28,0,0,0-.34.68A1.88,1.88,0,0,0,176.89,49.13Z" style="width: 40px; height: 60px; background: red;" transform="translate(-141.35 -28.19)"/>
<path class="cls-1" d="M174.17,44c5.66,2.26,9.29-4.81,10.08-6.62-1.93,0-9.91-.68-10.81,5.66a1.5,1.5,0,0,0,0,.73A2.14,2.14,0,0,0,174.17,44Z" transform="translate(-141.35 -28.19)"/>
</svg>

https://jsfiddle.net/rn18kyzo/

Upvotes: 0

Views: 28

Answers (1)

jad
jad

Reputation: 138

You cannot set background on SVG using background property. You can use fill:red

Here is complete standard on SVG

Hope it will help you

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.6 27.31">
<defs><style>.cls-1{fill:#669143;}</style></defs>
<title>world_pedals</title>
<path class="cls-1" d="M176.89,49.13c3.79,4.81,10.47.51,12.06-.68-1.59-1.19-8.21-5.66-12.06-.73a2.28,2.28,0,0,0-.34.68A1.88,1.88,0,0,0,176.89,49.13Z" style="width: 40px; height: 60px; fill: red;" transform="translate(-141.35 -28.19)"/>
<path class="cls-1" d="M174.17,44c5.66,2.26,9.29-4.81,10.08-6.62-1.93,0-9.91-.68-10.81,5.66a1.5,1.5,0,0,0,0,.73A2.14,2.14,0,0,0,174.17,44Z" transform="translate(-141.35 -28.19)"/>
</svg>

Upvotes: 1

Related Questions