We Keep Coding

change the filled color of an SVG image in react

I'm trying the control the filled level of an oval SVG.
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="grey">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M256,490.667
c-129.387,0-234.667-105.28-234.667-234.667S126.613,21.333,256,21.333S490.667,126.613,490.667,256S385.387,490.667,256,490.667z
"/>
</g>
i started to just trying to fill the oval to 100% and it'snot working.
<Card sx={{ maxWidth: 345 }}>
<CardHeader
}
...
<div>
<img src={OvalTank} style={Style} alt="Oval Tank" className=" ovalFilled" />
</div>
Style being set this way
const Style = {
height: 200,
margin: 'auto',
display: 'flex',
justifyContent: 'center',
fill: blue,
}
I try removing the fill attribute from the svg file(which is controlling the border color only).
can someone help to find out how to control filled color?
thanks

With some adjustments in your svg markup, you could place your svg assets by a <use> element.
Your svg element will need a an id for referencing.
I recommend wrapping your graphic in a <symbol> element like so:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<symbol id="path">
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M256,490.667
c-129.387,0-234.667-105.28-234.667-234.667S126.613,21.333,256,21.333S490.667,126.613,490.667,256S385.387,490.667,256,490.667z" />
</symbol>
</svg>
Now you're able to place an instance of your image by a reference:
<svg viewBox="0 0 512 512" style="fill:red">
<use href="ovalTank.svg#path" />
</svg>
Since we've stripped all fill attributes, we can style/override colors for every symbol instance.
The main benefit of this symbol/use approach is the idea of storing multiple graphic assets in one single svg file.
However, loading symbols from a external file will need this file to be on same domain.
Here is an inlined svg example:
svg {
display: inline-block;
width: 5em;
}
<!-- svg file content -->
<svg style="display:none;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<symbol id="path">
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M256,490.667
c-129.387,0-234.667-105.28-234.667-234.667S126.613,21.333,256,21.333S490.667,126.613,490.667,256S385.387,490.667,256,490.667z" />
</symbol>
<symbol id="icon-calendar" viewBox="0 0 448 512">
<path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z" />
</symbol>
</svg>
<!-- usage -->
<svg viewBox="0 0 512 512" style="fill:red">
<use href="#path" />
</svg>
<svg viewBox="0 0 448 512" style="fill:green">
<use href="#icon-calendar" />
</svg>

How can you fill svg's in javascipt with document.getElementById

Is there a way to fill SVG images with Javascript code, for example if you had a button with an id of myButton and you had a SVG inside it and used the document.getElementById("myButton").style to fill in the SVG, how could you do it? This is the code I tried:
document.getElementById("myButton").style.svg.fill="yellow";
<button id="myButton" type="submit">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" xml:space="preserve">
<g>
<g>
<path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
c-20.039,20.039-20.039,52.527,0,72.564c20.039,20.039,52.527,20.039,72.564,0l70.654-70.654
c35.605,22.464,77.735,35.483,122.853,35.483c127.318,0,230.9-103.582,230.9-230.9S408.42,0,281.1,0z M281.1,410.489
c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,281.1,51.311S460.689,131.875,460.689,230.9
S380.127,410.489,281.1,410.489z"/>
</g>
</g>
</svg>
</button>

Get the SVG element and set the fill style.
let svg = document.getElementById("myButton").getElementsByTagName('svg')[0];
svg.style.fill = "yellow";
<button id="myButton" type="submit">
<svg width="32px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" xml:space="preserve">
<g>
<g>
<path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
c-20.039,20.039-20.039,52.527,0,72.564c20.039,20.039,52.527,20.039,72.564,0l70.654-70.654
c35.605,22.464,77.735,35.483,122.853,35.483c127.318,0,230.9-103.582,230.9-230.9S408.42,0,281.1,0z M281.1,410.489
c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,281.1,51.311S460.689,131.875,460.689,230.9
S380.127,410.489,281.1,410.489z"/>
</g>
</g>
</svg>
</button>

document.getElementById("Layer_1").style.fill="yellow";
you must target the svg element not the parent div.and write it like this.

document.getElementById('myButton').querySelector('svg').style.fill = 'yellow';
Or you can eliminate the call to getElementById
document.querySelector('#myButton svg').style.fill = 'yellow';

In this example, the color is assigned by clicking on the button. And you had a mistake - instead of style.svg.fill, you need to write style.fill.
var button_svg = document.querySelector("#myButton");
button_svg.onclick = function (){
this.style.fill="yellow";
}
button {
width: 100px;
}
<button id="myButton" type="submit">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" xml:space="preserve">
<g>
<g>
<path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
c-20.039,20.039-20.039,52.527,0,72.564c20.039,20.039,52.527,20.039,72.564,0l70.654-70.654
c35.605,22.464,77.735,35.483,122.853,35.483c127.318,0,230.9-103.582,230.9-230.9S408.42,0,281.1,0z M281.1,410.489
c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,281.1,51.311S460.689,131.875,460.689,230.9
S380.127,410.489,281.1,410.489z"/>
</g>
</g>
</svg>
</button>
It's toggle.
var button_svg = document.querySelector("#myButton");
button_svg.onclick = function (){
this.classList.toggle('svg_yellow');;
}
button {
width: 100px;
}
.svg_yellow {
fill: yellow;
}
<button id="myButton" type="submit">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" xml:space="preserve">
<g>
<g>
<path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
c-20.039,20.039-20.039,52.527,0,72.564c20.039,20.039,52.527,20.039,72.564,0l70.654-70.654
c35.605,22.464,77.735,35.483,122.853,35.483c127.318,0,230.9-103.582,230.9-230.9S408.42,0,281.1,0z M281.1,410.489
c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,281.1,51.311S460.689,131.875,460.689,230.9
S380.127,410.489,281.1,410.489z"/>
</g>
</g>
</svg>
</button>
It's no click.
document.querySelector("#myButton").style.fill="yellow";
button {
width: 100px;
}
<button id="myButton" type="submit">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" xml:space="preserve">
<g>
<g>
<path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
c-20.039,20.039-20.039,52.527,0,72.564c20.039,20.039,52.527,20.039,72.564,0l70.654-70.654
c35.605,22.464,77.735,35.483,122.853,35.483c127.318,0,230.9-103.582,230.9-230.9S408.42,0,281.1,0z M281.1,410.489
c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,281.1,51.311S460.689,131.875,460.689,230.9
S380.127,410.489,281.1,410.489z"/>
</g>
</g>
</svg>
</button>

How to change the color of rect when mouse over by js?

I write this code,but turns out it can't change the color of rect when mouse over,could anyone tell me where is wrong and how can I fix it, please?`
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 288 560" style="enable-background:new 0 0 288 560;" xml:space="preserve">
<rect id="haha" x="83.4" y="130.7" width="121.2" height="115.2" style="fill:#FFFF00" onmouseover="a()" onmouseout="b()"/>
<script type="text/javascript">
function a(){
var ab=document.getElementById('haha');
ab.style.color="fill:#FFAEB9";
}
function b(){
var ab=document.getElementById('haha');
ab.style.color="fill:#FFFF00";
}
</script>
</svg>

You are accessing the color rule, which will change the text color of an HTML element. Just use the fillrule on the style property.
function a(){
var ab=document.getElementById('haha');
ab.style.fill = "#FFAEB9";
}
function b(){
var ab=document.getElementById('haha');
ab.style.fill = "#FFFF00";
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0" style="enable-background:new 0 0;" xml:space="preserve">
<rect id="haha" x="0" y="0" width="120" height="120" style="fill:#FFFF00" onmouseover="a()" onmouseout="b()"/>
</svg>

Fill does not go in color it goes in fill so you use style.fill=. It is its own style
function a(){
var ab=document.getElementById('haha');
ab.style.fill ="#FFAEB9";
}
function b(){
var ab=document.getElementById('haha');
ab.style.fill="#FFFF00";
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 288 560" style="enable-background:new 0 0 288 560;" xml:space="preserve">
<rect id="haha" x="83.4" y="130.7" width="121.2" height="115.2" style="fill:#FFFF00" onmouseover="a()" onmouseout="b()"/>
</svg>

How to morph one SVG path element into another on a click command?

I am trying to make a play and stop button. I don't know how to morph the triangle shape (it is a path) into the square shape (it is a path) when it has been clicked. Only showing one shape at a time. Can anyone help?
<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
</style>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</svg>

I think one way is to define your two paths in defs and then use a use xlink:href="#shapeName" with an onclick handler that toggles that attribute or the corresponding DOM property, if supported..
A use element object with fully implemented SVG DOM has a href property with a baseVal property that can be read and set, so inside browsers as far as I have tested (with Firefox, Chrome, IE and Edge on Window) we can simply toggle that property, see https://jsfiddle.net/4x0gnkob/ for an online sample.
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<defs>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</defs>
<use xlink:href="#playTriangle" pointer-events="all" onclick="this.href.baseVal = this.href.baseVal == '#playTriangle' ? '#stopSquare' : '#playTriangle';"></use>
</svg>
An alternative is to toggle the DOM attribute, it seems a bit complicated in an HTML5 environment as I thought I could solve it with setAttributeNS and getAttributeNS in one line, after some testing it seems that within HTML5 getAttribute('xlink:href') works better, so the full code tries to test which function returns a value.
function toggleLink(element, value1, value2) {
var xlinkNS = 'http://www.w3.org/1999/xlink';
var linkName = 'xlink:href';
var oldValue = element.getAttributeNS(xlinkNS, linkName) || element.getAttribute(linkName);
if (element.hasAttributeNS(xlinkNS, 'href')) {
element.setAttributeNS(xlinkNS, linkName, oldValue == value1 ? value2 : value1)
}
else {
element.setAttribute(linkName, oldValue == value1 ? value2 : value1);
}
}
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<defs>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</defs>
<use xlink:href="#playTriangle" pointer-events="all" onclick="toggleLink(this, '#stopSquare', '#playTriangle')"></use>
</svg>
Online at https://jsfiddle.net/w36k21uz/1/.

You cannot do all the things just like that, you can either use SMIL, which is to become deprecated, or use a dedicated animation engine. I developed KUTE.js with a SVG Plugin that does most of the things you probably need for SVG.
A quick demo (should work in Firefox only due to some Stackoverflow XSS issue):
<div style="width: 220px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle" fill="indigo" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"></path>
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"></path>
</svg>
</div>
<script id="core" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute.min.js"></script>
<script id="svg" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute-svg.min.js"></script>
<script>
var tween = KUTE.to('#rectangle', { path: '#star' }, {duration: 1500, yoyo: true, repeat: 1}).start();
document.addEventListener('click', function(){
!tween.playing && tween.start();
}, false);
</script>

Run Draw SVG use CSS

i have SVG path, and i want to make draw animation for this SVG like "CROSS"....
so could you help me guys,...?
<svg version="1.1" id="Layer_1" class="logo-cross" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50%" height="100%" viewBox="0 0 63.7 64.7" style="enable-background:new 0 0 63.7 64.7;" xml:space="preserve">
<style type="text/css">
<![CDATA[.st0{fill:#929396;}.st1{fill:#F00;}]]>
</style>
<g>
<path class="st0" d="M1.3,1h3.5L1.3,4.5V1z M1.3,8.7L9,1h4.2L1.3,12.9V8.7z M1.3,54.7L55.1,1h-4.2L1.3,50.5V54.7z M1,63.1L63.1,1
h-4.2L1,58.9V63.1z M1.3,21.2L21.6,1h-4.2l-16,16V21.2z M1.3,46.3L46.7,1h-4.2L1.3,42.2V46.3z M1.3,38l37-37h-4.2L1.3,33.8V38z
M1.3,29.6L29.9,1h-4.2L1.3,25.4V29.6z"/>
<path class="st1" d="M1,59.6l3.5,3.5H1V59.6z M1,55.4l7.7,7.7h4.2L1,51.2V55.4z M1,13.6l49.5,49.5h4.2L1,9.4V13.6z M1,5.2
l57.9,57.9h4.2L1,1V5.2z M1,47.1l16,16h4.2L1,42.9V47.1z M1,21.9l41.2,41.2h4.2L1,17.7V21.9z M1,30.3l32.8,32.8H38l-37-37V30.3z
M1.3,38.7l24.4,24.4h3.9L1,34.5L1.3,38.7z"/>
</g>
</svg>

I would take a look at the D3 library as it will help you tremendously.