unable to align HTML and SVG elements using CSS - javascript

I have the following HTML and SVG elements. I have changed around a few positions and added some padding-left in my CSS, however, I'm unable to align these next to each other.
This is the code and output on jsbin
This is the output I currently get
However, I would like the elements to be aligned next to each other at the center of the page, as follows
This is my code
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Tennis</title>
<link rel="stylesheet" type="text/css" href="css/tennis.css">
<link rel="stylesheet" type="text/css" href="css/home.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<link rel="next" href="usopenseries.html">-->
<!--<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />-->
</head>
<body>
<div id="title" class="row">
<!--<div id="prev">-->
<!--</div>-->
<!--<div class="ball">-->
<!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
<!--<circle cx="50" cy="50" r="25" />-->
<!--</svg>-->
<!--</div>-->
<div id="tennis">Serve direction</div>
<!--<div class="ball">-->
<!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
<!--<circle cx="50" cy="50" r="25" />-->
<!--</svg>-->
<!--</div>-->
<!--<div id="next">-->
<!--</div>-->
</div>
<div id="court" class="row">
<!--<label class="control-label">Select File</label>-->
<!--<input id="input-1" type="file" class="file">-->
<p>Upload a csv file<br>
<input type="file" id="myFile"/>
<p>Select player from list<br>
<select id="playerselect" name="playerselect">
<option selected="true" style="display:none;">Select player</option>
<option value="safin">Marat Safin</option>
<option value="stepanek">Radek Stepanek</option>
</select>
<p>Select type of serve<br>
<select id="serveselect" name="serveselect">
<option selected="true" style="display:none;">Select serve</option>
<option value="firstserve">First Serve</option>
<option value="secondserve">Second Serve</option>
</select>
<svg id="tennis-court" >
<svg onclick="recordClick(1)">
<rect x="20" y="35" width="30" height="30" />
<text x="21" y="50" fill="red">Deuce</text>
</svg>
<svg onclick="recordClick(2)">
<rect x="50" y="35" width="30" height="30" />
<text x="60" y="50" fill="red">Ad</text>
</svg>
<path d="M10 10 L10 120 L20 120 L20 10 Z" />
<path d="M10 10 L90 10 Z" />
<path d="M90 10 L90 120 L80 120 L80 10 Z" />
<path d="M90 120 L10 120 Z" />
<path d="M10 65 L90 65 Z" />
<path d="M10 35 L90 35 Z" />
<path d="M10 95 L90 95 Z" />
<path d="M50 35 L50 95 Z" />
<path d="M50 10 L50 15 Z" />
<path d="M50 120 L50 115 Z" />
<!--<a xlink:href="wtah2h.html"><rect x="47" y="4" width="39" height="4.5" /><path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" /><text x="47.5" y="8">WTA H2H</text></a>-->
<!--<a xlink:href="atph2h.html"><rect x="8" y="8.5" width="18" height="27" /><path d="M8 8.5 L26 8.5 L26 35.5 L8 35.5 Z" /><text x="8.5" y="35">ATP H2H</text></a>-->
<!--<path d="M26 8.5 L47 8.5 L47 22 L26 22 Z" />-->
<!--<path d="M26 22 L47 22 L47 35.5 L26 35.5 Z" />-->
<!--<path d="M8 35.5 L47 35.5 L47 40 L8 40 Z" />-->
<!--<path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" />-->
<!--<path d="M47 8.5 L68 8.5 L68 22 L47 22 Z" />-->
<!--<path d="M47 22 L68 22 L68 35.5 L47 35.5 Z" />-->
<!--<path d="M68 8.5 L86 8.5 L86 35.5 L68 35.5 Z" />-->
<!--<path d="M47 35.5 L86 35.5 L86 40 L47 40 Z" />-->
<!--<path d="M8 22 L9 22 Z" />-->
<!--<path d="M86 22 L85 22 Z" />-->
<!--3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices-->
<!--3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices-->
<!--3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices-->
<svg onclick="recordClick(1)">
<rect x="120" y="35" width="10" height="30" />
<text x="120" y="50" fill="red">W</text>
<rect x="130" y="35" width="15" height="30" />
<text x="134" y="50" fill="red">B</text>
<rect x="145" y="35" width="5" height="30" />
<text x="144" y="50" fill="red">T</text>
</svg>
<svg onclick="recordClick(2)">
<rect x="150" y="35" width="15" height="30" />
<text x="150" y="50" fill="red">T</text>
<rect x="155" y="35" width="15" height="30" />
<text x="158" y="50" fill="red">B</text>
<rect x="170" y="35" width="10" height="30" />
<text x="169" y="50" fill="red">W</text>
</svg>
<path d="M110 10 L110 120 L120 120 L120 10 Z" />
<path d="M110 10 L190 10 Z" />
<path d="M190 10 L190 120 L180 120 L180 10 Z" />
<path d="M190 120 L110 120 Z" />
<path d="M110 65 L190 65 Z" />
<path d="M110 35 L190 35 Z" />
<path d="M110 95 L190 95 Z" />
<path d="M150 35 L150 95 Z" />
<path d="M150 10 L150 15 Z" />
<path d="M150 120 L150 115 Z" />
<!--6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices-->
<!--6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices-->
<!--6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices -->
<svg onclick="recordClick(1)">
<rect x="220" y="35" width="10" height="30" />
<text x="220" y="50" fill="red">W</text>
<rect x="230" y="35" width="15" height="30" />
<text x="234" y="50" fill="red">B</text>
<rect x="245" y="35" width="5" height="30" />
<text x="244" y="50" fill="red">T</text>
</svg>
<svg onclick="recordClick(2)">
<rect x="250" y="35" width="15" height="30" />
<text x="250" y="50" fill="red">T</text>
<rect x="255" y="35" width="15" height="30" />
<text x="258" y="50" fill="red">B</text>
<rect x="270" y="35" width="10" height="30" />
<text x="269" y="50" fill="red">W</text>
</svg>
<path d="M210 10 L210 120 L220 120 L220 10 Z" />
<path d="M210 10 L290 10 Z" />
<path d="M290 10 L290 120 L280 120 L280 10 Z" />
<path d="M290 120 L210 120 Z" />
<path d="M210 65 L290 65 Z" />
<path d="M210 35 L290 35 Z" />
<path d="M210 95 L290 95 Z" />
<path d="M250 35 L250 95 Z" />
<path d="M250 10 L250 15 Z" />
<path d="M250 120 L250 115 Z" />
<!--<a xlink:href="wtah2h.html"><rect x="47" y="4" width="39" height="4.5" /><path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" /><text x="47.5" y="8">WTA H2H</text></a>-->
<!--<a xlink:href="atph2h.html"><rect x="8" y="8.5" width="18" height="27" /><path d="M8 8.5 L26 8.5 L26 35.5 L8 35.5 Z" /><text x="8.5" y="35">ATP H2H</text></a>-->
<!--<path d="M26 8.5 L47 8.5 L47 22 L26 22 Z" />-->
<!--<path d="M26 22 L47 22 L47 35.5 L26 35.5 Z" />-->
<!--<path d="M8 35.5 L47 35.5 L47 40 L8 40 Z" />-->
<!--<path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" />-->
<!--<path d="M47 8.5 L68 8.5 L68 22 L47 22 Z" />-->
<!--<path d="M47 22 L68 22 L68 35.5 L47 35.5 Z" />-->
<!--<path d="M68 8.5 L86 8.5 L86 35.5 L68 35.5 Z" />-->
<!--<path d="M47 35.5 L86 35.5 L86 40 L47 40 Z" />-->
<!--<path d="M8 22 L9 22 Z" />-->
<!--<path d="M86 22 L85 22 Z" />-->
</svg>
<button id = "visualizeBtn" onclick="myFunction()">Visualize serve</button>
</div>
<!--<div id="bottom" class="row">-->
<!--<div class="ball">-->
<!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
<!--<circle cx="50" cy="50" r="25" />-->
<!--</svg>-->
<!--</div>-->
<!--<div class="tennis"></div>-->
<!--<div class="ball">-->
<!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
<!--<circle cx="50" cy="50" r="25" />-->
<!--</svg>-->
<!--</div>-->
<!--</div>-->
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.2.min.js"></script>-->
<!--<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
<!--<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<!--<script type="text/javascript" src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>-->
<!--<script type="text/javascript" src="js/tennis.js"></script>-->
<script>
// (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
// (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
// m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
// })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
//
// ga('create', 'UA-23542009-21', 'auto');
// ga('send', 'pageview');
function recordClick(i)
{
if(i==1)
alert("clicked Deuce court...");
else if(i==2)
alert("clicked Ad court...");
}
function myFunction()
{
alert("clicked on the visualize button!");
}
</script>
</body>
</html>
home.css referenced by above HTML file
#court {
/*padding-left: 10cm;*/
height: 80%;
max-height: 80%;
max-width: 80%;
overflow: hidden;
}
#tennis-court {
height: 25%;
width: 27.5%;
background-color: #0A5C2F;
}
#tennis-court path {
stroke: #ffffff;
stroke-width: 1.5px;
fill:none;
}
#tennis-court text {
text-anchor: start;
font-size: 0.95rem;
text-decoration: none;
stroke: #ffffff;
stroke-width: 0.1px;
fill: #ffffff;
}
#tennis-court rect {
fill: #0A5C2F;
stroke-width: 0.1px;
}
#tennis-court rect:hover {
fill: #ccff00;
}
#myFile
{
/*padding-left: 1cm;*/
/*padding-top: 10cm;*/
padding-left: 2cm;
}
#visualizeBtn
{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
tennis.css referenced by above HTML file
html, body {
height: 100%;
width: 100%;
}
a, a:visited, a:focus, a:hover {
color: #0A5C2F !important;
text-decoration: none !important;
}
svg a, svg a:visited, svg a:focus, svg a:hover {
color: #0A5C2F;
text-decoration: none;
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.button {
font-size: 1.4rem;
line-height: 2rem;
}
.button:hover, .button.active:hover {
opacity: 0.5;
cursor: pointer;
}
/* top bar */
#title, #bottom {
height: 10%;
text-align: center;
display: table;
table-layout: fixed;
margin: 0;
width: 100%;
}
#title a:hover {
opacity: 0.5;
}
.ball {
width: 5%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
margin: 0 auto;
}
.ball-svg {
float: right;
max-height: 50px;
}
.ball-svg circle {
fill: #ccff00;
}
#tennis {
display: table-cell;
vertical-align: middle;
width: 30%;
font-size: 3rem;
color: #0A5C2F;
}
#prev, #next {
display: table-cell;
vertical-align: middle;
width: 30%;
font-size: 1.5rem;
color: #0A5C2F;
}
/* main */
#main {
height: 90%;
max-height: 90%;
max-width: 100%;
overflow: hidden;
}
#main text {
font-size: 1rem;
text-anchor: middle;
}wwq
#main circle:hover {
cursor: pointer;
}
/* options */
#options {
height: 10%;
text-align: center;
display: table;
table-layout: fixed;
margin: 0;
width: 100%;
}
#options-1-table, #options-2-table {
display: table;
height: 100%;
width: 100%;
}
#options-1, #options-2 {
text-align: center;
display: table-cell;
vertical-align: middle;
height: 100%;
width: 35%;
}
/* chart */
#chart-row {
height: 90%;
}
#chart {
height: 100%;
text-align: center;
padding-left: 0;
padding-right: 0;
}
#chart-title {
text-align: center;
display: table-cell;
vertical-align: middle;
height: 100%;
width: 30%;
font-size: 1.4rem;
background-color: #0A5C2F;
color: #ffffff;
}


Use div's to contain the blocks you want to align horizontally and set them to float: left;
css:
#court div {
float: left;
}
html:
<div id="court" class="row">
<div>
<p>Upload a csv file</p><br>
<input type="file" id="myFile">
</div>
<div>
<p>Select player from list</p><br>
<select id="playerselect" name="playerselect">
<option selected="true" style="display:none;">Select player</option>
<option value="safin">Marat Safin</option>
<option value="stepanek">Radek Stepanek</option>
</select>
</div>
<div>
<p>Select type of serve</p><br>
<select id="serveselect" name="serveselect">
<option selected="true" style="display:none;">Select serve</option>
<option value="firstserve">First Serve</option>
<option value="secondserve">Second Serve</option>
</select>
</div>
<div>
<svg id="tennis-court">
<svg onclick="recordClick(1)">
<rect x="20" y="35" width="30" height="30"></rect>
<text x="21" y="50" fill="red">Deuce</text>
</svg>
<svg onclick="recordClick(2)">
<rect x="50" y="35" width="30" height="30"></rect>
<text x="60" y="50" fill="red">Ad</text>
</svg>
<path d="M10 10 L10 120 L20 120 L20 10 Z"></path>
<path d="M10 10 L90 10 Z"></path>
<path d="M90 10 L90 120 L80 120 L80 10 Z"></path>
<path d="M90 120 L10 120 Z"></path>
<path d="M10 65 L90 65 Z"></path>
<path d="M10 35 L90 35 Z"></path>
<path d="M10 95 L90 95 Z"></path>
<path d="M50 35 L50 95 Z"></path>
<path d="M50 10 L50 15 Z"></path>
<path d="M50 120 L50 115 Z"></path>
<svg onclick="recordClick(1)">
<rect x="120" y="35" width="10" height="30"></rect>
<text x="120" y="50" fill="red">W</text>
<rect x="130" y="35" width="15" height="30"></rect>
<text x="134" y="50" fill="red">B</text>
<rect x="145" y="35" width="5" height="30"></rect>
<text x="144" y="50" fill="red">T</text>
</svg>
<svg onclick="recordClick(2)">
<rect x="150" y="35" width="15" height="30"></rect>
<text x="150" y="50" fill="red">T</text>
<rect x="155" y="35" width="15" height="30"></rect>
<text x="158" y="50" fill="red">B</text>
<rect x="170" y="35" width="10" height="30"></rect>
<text x="169" y="50" fill="red">W</text>
</svg>
<path d="M110 10 L110 120 L120 120 L120 10 Z"></path>
<path d="M110 10 L190 10 Z"></path>
<path d="M190 10 L190 120 L180 120 L180 10 Z"></path>
<path d="M190 120 L110 120 Z"></path>
<path d="M110 65 L190 65 Z"></path>
<path d="M110 35 L190 35 Z"></path>
<path d="M110 95 L190 95 Z"></path>
<path d="M150 35 L150 95 Z"></path>
<path d="M150 10 L150 15 Z"></path>
<path d="M150 120 L150 115 Z"></path>
<svg onclick="recordClick(1)">
<rect x="220" y="35" width="10" height="30"></rect>
<text x="220" y="50" fill="red">W</text>
<rect x="230" y="35" width="15" height="30"></rect>
<text x="234" y="50" fill="red">B</text>
<rect x="245" y="35" width="5" height="30"></rect>
<text x="244" y="50" fill="red">T</text>
</svg>
<svg onclick="recordClick(2)">
<rect x="250" y="35" width="15" height="30"></rect>
<text x="250" y="50" fill="red">T</text>
<rect x="255" y="35" width="15" height="30"></rect>
<text x="258" y="50" fill="red">B</text>
<rect x="270" y="35" width="10" height="30"></rect>
<text x="269" y="50" fill="red">W</text>
</svg>
<path d="M210 10 L210 120 L220 120 L220 10 Z"></path>
<path d="M210 10 L290 10 Z"></path>
<path d="M290 10 L290 120 L280 120 L280 10 Z"></path>
<path d="M290 120 L210 120 Z"></path>
<path d="M210 65 L290 65 Z"></path>
<path d="M210 35 L290 35 Z"></path>
<path d="M210 95 L290 95 Z"></path>
<path d="M250 35 L250 95 Z"></path>
<path d="M250 10 L250 15 Z"></path>
<path d="M250 120 L250 115 Z"></path>
</svg>
</div>
<div>
<button id="visualizeBtn" onclick="myFunction()">Visualize serve</button>
</div>
</div>
http://jsbin.com/sizahedehe/1/edit?html,css,output

Related

Drop Animation Function for connect four game in JS and SVG

I'm new to programming and currently trying my hand at a project. My code is certainly not good, however, I would like to have a function for my game, with which I can throw a chip in each column, in which I click on the top of the respective button. Is my approach completely wrong or is it possible to work with the current state? Would be glad about tips
body {
background-color: #cecece;
}
h1 {
background-color: rgb(205, 169, 247);
border: 3px solid black;
border-radius: 5px;
padding: 25px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 1px #000000;
}
h3 {
background-color: #fabd68;
border: 3px solid black;
padding: 15px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
width: 400px;
}
.button {
display: inline-block;
padding: 10px 10px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
color: rgb(0, 0, 0);
background-color: #e26262;
border: 2px solid;
border-radius: 10px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
p {
background-color: #85e4a1;
border: 3px dotted black;
border-radius: 8px;
padding: 25px;
text-align: left;
width: 600px;
height: 150px;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
margin-left: 900px;
margin-top: -210px;
}
h4 {
background-color: rgb(148, 203, 240);
border: 2px solid black;
border-radius: 5px;
padding: 25px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
width: 900px;
margin-top: 70px;
}
.A {
offset-path: path('M 80 -10 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70');
offset-distance: 0%;
animation: red-ball 1s linear;
animation-iteration-count: 1;
}
#keyframes red-ball {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
.A:hover {
fill: #68fa88;
}
.B:hover {
fill: #68fa88;
}
.C:hover {
fill: #68fa88;
}
.D:hover {
fill: #68fa88;
}
.E:hover {
fill: #68fa88;
}
.F:hover {
fill: #68fa88;
}
.G:hover {
fill: #68fa88;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My first webpage</title>
<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
<link rel='stylesheet' href='style.css'>
<script src='main.js' charset="utf-8"></script>
</head>
<body>
<svg width="550" height="500">
<path class="line1" d="M 45 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line2" d="M 115 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line3" d="M 185 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line4" d="M 255 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line5" d="M 325 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line6" d="M 395 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line7" d="M 465 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<circle class="A"cx="45" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<circle class="B"cx="115" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<circle class="C"cx="185" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<circle class="D"cx="255" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<circle class="E"cx="325" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<circle class="F"cx="395" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<circle class="G"cx="465" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<rect class="col1 row1" x="10" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos1/1"cx="45" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col2 row1" x="80" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos2/1"cx="115" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col3 row1" x="150" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos3/1"cx="185" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col4 row1" x="220" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos4/1"cx="255" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col5 row1" x="290" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos5/1"cx="325" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col6 row1" x="360" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos6/1"cx="395" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col7 row1" x="430" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos7/1"cx="465" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col1 row2" x="10" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos1/2"cx="45" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col2 row2" x="80" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos2/2"cx="115" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col3 row2" x="150" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos3/2"cx="185" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col4 row2" x="220" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos4/2"cx="255" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col5 row2" x="290" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos5/2"cx="325" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col6 row2" x="360" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos6/2"cx="395" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col7 row2" x="430" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos7/2"cx="465" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col1 row3" x="10" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col2 row3" x="80" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col3 row3" x="150" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col4 row3" x="220" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col5 row3" x="290" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col6 row3" x="360" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col7 row3" x="430" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col1 row4" x="10" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col2 row4" x="80" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col3 row4" x="150" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col4 row4" x="220" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col5 row4" x="290" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col6 row4" x="360" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col7 row4" x="430" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col1 row5" x="10" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col2 row5" x="80" y="350" width="70" height="70"70
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col3 row5" x="150" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col4 row5" x="220" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col5 row5" x="290" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col6 row5" x="360" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col7 row5" x="430" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col1 row6" x="10" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col2 row6" x="80" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col3 row6" x="150" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col4 row6" x="220" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col5 row6" x="290" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col6 row6" x="360" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col7 row6" x="430" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
</svg>
</body>
</html>
It's the first time I use StackOverflow, I hope it's right.
I've tried to create a path and run the animation and for the first 2 rows I have invisible circles where I thought that these should then become visible so that a circle remains inside. After several hours I am just completely stumped.

Selecting an element with same class names using css

I have this ugly generated code and I want to pick an element and add an additional attribute. I can only use CSS to do this. I tried a few things such as #CHART_1_control div:nth-of-type and nth-child but I seem to be getting lost with all the <g> classes. I'm also not sure if that's the direction I should be heading.
I'm trying to get to the last <g> class and change the three <rect> to include an additional attribute. Is that possible to do?
<g class="v-datapoint-group" fill-opacity="0.4" stroke-opacity="0.4">
<g>
<path d="M23.3876953125,126.6L23.3876953125,126.6L70.1630859375,126.6L70.1630859375,126.6L116.93847656249999,126.6L116.93847656249999,126.6L163.7138671875,126.6L163.7138671875,126.6L210.4892578125,126.6L210.4892578125,35.87L257.2646484375,35.87L257.2646484375,126.6" fill="none" stroke-linejoin="round" stroke="#008000" stroke-width="1" class="v-bar-series-path" display="none"></path>
<g data-id="0" data-datapoint-id="1" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(23.3876953125, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#008000" stroke-opacity="0.4"></rect>
</g>
<g data-id="1" data-datapoint-id="2" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(116.93847656249999, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#ff9900" stroke-opacity="0.4"></rect>
</g>
<g data-id="2" data-datapoint-id="3" class="v-datapoint v-morphable-datapoint v-datapoint-selected" transform="translate(210.4892578125, 35.87)" fill-opacity="1">
<rect width="46.77539062500001" height="90.72999999999999" fill="#cc0000" stroke-opacity="1" contenteditable="true" stroke="#445a7c" stroke-width="1px"></rect>
</g>
</g>
So here we change the fill color just using css on the last 3 rect
Full Code below:
.v-datapoint rect{
fill:blue;
}
<div id="CHART_1_control" style="width:353px;height:200px" class="zenControl">
<div class="uvb-vizframe-container">
<div style="width: 353px; height: 200px; visibility: visible; position: relative;">
<div class="viz-controls-chart-holder viz-controls-common-scrollable" style="position: relative; width: 353px; height: 200px;">
<div class="viz-controls-chart-layer" style="position: absolute; width: 353px; height: 200px; visibility: visible;">
<div id="UIComp_0" class="v-info" aria-labelledby="UIComp_0-title" tabindex="0" style="height: 100%; width: 100%; position: relative; font-size: 10px; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none;">
<svg class="v-m-root" focusable="false" tabIndex="-1" style="left: 0px; top: 0px; height: 100%; width: 100%; display: block; cursor: default;">
<defs></defs>
<g class="v-m-desc-title">
<title id="UIComp_0-title">An Interactive Column Chart </title>
</g>
<g class="v-m-action-layer-group js-zen-nozoom"></g>
<g class="v-m-decoration-layer-group"></g>
<g class="v-m-background">
<rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="353" height="200" style="fill:transparent"></rect>
</g>
<g class="v-m-title" transform="translate(48.34765625, 24)"></g>
<g class="v-m-legendGroup" transform="translate(329, 24)" role="listbox">
<g class="v-m-legend" transform="translate(0,0)">
<rect class="v-bound" width="0" height="0" visibility="hidden"></rect>
</g>
</g>
<g class="v-m-main" transform="translate(24, 24)">
<g class="v-m-plot" transform="translate(24.34765625, 0)">
<rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="280.65234375" height="126.6" style="fill:transparent"></rect>
<line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="0" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="280.65234375" y1="0" x2="280.65234375" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="280.65234375" y2="0" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="0" y1="126.6" x2="280.65234375" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<clipPath id="plot_main_clipPath_9e2f712c-3fd6-4720-80a0-0040e5b7a732">
<rect y="-1" width="281.65234375" height="127.6"></rect>
</clipPath>
<rect class="v-plot-bound v-bound v-zoom-plot" width="280.65234375" height="126.6" fill="transparent"></rect>
<g clip-path="url(#plot_main_clipPath_9e2f712c-3fd6-4720-80a0-0040e5b7a732)">
<g class="v-plot-main" role="list" transform="translate(0, 0)">
<g class="v-gridline-group">
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="126.6" x2="280.65234375" y2="126.6"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="84.4" x2="280.65234375" y2="84.4"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="42.2" x2="280.65234375" y2="42.2"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="0" x2="280.65234375" y2="0"></line>
</g>
</g>
<g class="v-datapoint-group" fill-opacity="0.4" stroke-opacity="0.4">
<g>
<path d="M23.3876953125,126.6L23.3876953125,126.6L70.1630859375,126.6L70.1630859375,126.6L116.93847656249999,126.6L116.93847656249999,126.6L163.7138671875,126.6L163.7138671875,126.6L210.4892578125,126.6L210.4892578125,35.87L257.2646484375,35.87L257.2646484375,126.6" fill="none" stroke-linejoin="round" stroke="#008000" stroke-width="1" class="v-bar-series-path" display="none"></path>
<g data-id="0" data-datapoint-id="1" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(23.3876953125, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#008000" stroke-opacity="0.4"></rect>
</g>
<g data-id="1" data-datapoint-id="2" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(116.93847656249999, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#ff9900" stroke-opacity="0.4"></rect>
</g>
<g data-id="2" data-datapoint-id="3" class="v-datapoint v-morphable-datapoint v-datapoint-selected" transform="translate(210.4892578125, 35.87)" fill-opacity="1">
<rect width="46.77539062500001" height="90.72999999999999" fill="#cc0000" stroke-opacity="1" contenteditable="true" stroke="#445a7c" stroke-width="1px"></rect>
</g>
</g>
</g>
</g>
</g>

How to change the color of a svg?

Created a svg using figma and am attempting to change the color in css. fill: black is not working.
SVG Code:
<svg width="58" height="57" viewBox="0 0 58 57" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>track</title>
<desc>Created using Figma</desc>
<g id="Canvas" transform="translate(-12596 1455)">
<g id="track">
<use xlink:href="#path0_fill" fill="url(#pattern0)"
transform="translate(12596 -1455)"/>
</g>
</g>
<defs>
<pattern id="pattern0" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="matrix(0.0172414 0 0 0.0175439 0 0)"/>
</pattern>
<path id="path0_fill" d="M 0 0L 58 0L 58 57L 0 57L 0 0Z"/>
<image id="image0" width="58" height="57" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA5CAYAAABnLziGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2NEU2MTVDOEVCQzJFNzExOEZEREJDOEMwMDc0QjFGOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NkI1NEZDMEVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NkI1NEZCRkVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgzNjI4N0NBMDFERkU3MTFBNjFFQzgyMkEyM0JDMTdBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0RTYxNUM4RUJDMkU3MTE4RkREQkM4QzAwNzRCMUY4Ii8+IDwvcmRmOkRl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"/>
</defs>
</svg>

Solution CSS + SVG
In the first answer was a solution purely with the help of SVG.
If you want to control the coloring of an image from an external style sheet, you must specify the path to this stylesheet in the first line of the svg file.
<?xml-stylesheet type="text/css" href="style.css"?>
where you must specify the full path to your style sheet.
The color of the image lines will produce a filter:
#image0 {
filter:url(#WhiteFilter);
}
Coloring the background of images
#path0_fill {
fill:black;
}
Below is the full code:
svg path {
fill:inherit;
stroke:inherit;
}
#path0_fill {
fill:black;
}
#image0 {
filter:url(#WhiteFilter);
}
<?xml-stylesheet type="text/css" href="style.css"?>
<svg width="58" height="57" viewBox="0 0 58 57" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<!-- black filter -->
<filter id="BlackFilter" x="-20" y="-20" width="75" height="75">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0
"/>
</filter>
<!-- white filter -->
<filter id="WhiteFilter" x="-20" y="-20" width="75" height="75">
<feColorMatrix in="SourceGraphic" type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0
"/>
</filter>
</defs>
<path id="path0_fill" d="M 0 0L 58 0L 58 57L 0 57L 0 0Z" />
<image id="image0" width="58" height="57" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA5CAYAAABnLziGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2NEU2MTVDOEVCQzJFNzExOEZEREJDOEMwMDc0QjFGOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NkI1NEZDMEVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NkI1NEZCRkVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgzNjI4N0NBMDFERkU3MTFBNjFFQzgyMkEyM0JDMTdBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0RTYxNUM4RUJDMkU3MTE4RkREQkM4QzAwNzRCMUY4Ii8+IDwvcmRmOkRl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" />
</svg>
Update
Adding as a result of the comment:
line image machine in your example draws a filter
path in your example draws a border around the image of the
machine, so there was no background write in CSS
#path0_fill {
fill:none;
stroke:black;
svg path {
fill:inherit;
stroke:inherit;
}
#path0_fill {
fill:none;
stroke:black;
stroke-width:2px;
}
#image0 {
filter:url(#BlackFilter);
}
<?xml-stylesheet type="text/css" href="style.css"?>
<svg width="58" height="57" viewBox="0 0 58 57" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<!-- black filter -->
<filter id="BlackFilter" x="-20" y="-20" width="75" height="75">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0
"/>
</filter>
<!-- white filter -->
<filter id="WhiteFilter" x="-20" y="-20" width="75" height="75">
<feColorMatrix in="SourceGraphic" type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0
"/>
</filter>
</defs>
<path id="path0_fill" d="M 0 0L 58 0L 58 57L 0 57L 0 0Z" />
<image id="image0" width="58" height="57" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA5CAYAAABnLziGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2NEU2MTVDOEVCQzJFNzExOEZEREJDOEMwMDc0QjFGOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NkI1NEZDMEVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NkI1NEZCRkVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgzNjI4N0NBMDFERkU3MTFBNjFFQzgyMkEyM0JDMTdBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0RTYxNUM4RUJDMkU3MTE4RkREQkM4QzAwNzRCMUY4Ii8+IDwvcmRmOkRl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" />
</svg>

Solution SVG
The image in base64 format can not be stylized in the usual ways:
neither in the external stylesheet css fill:black;
nor with the presentation styles SVG fill="black"
But with the help of SVG filters you can paint the image in any color
There is a very useful article, in my opinion, on the use of filters for coloring images.
Filter for painting in black color of lines:
<!-- black filter -->
<filter id="BlackFilter" x="-20" y="-20" width="75" height="75">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0
"/>
</filter>
in the examples below path Is responsible for coloring the background
<path id="path0_fill" d="M 0 0L 58 0L 58 57L 0 57L 0 0Z" fill="white"/>
Unfortunately from the question I did not understand what you want to paint in black: the background or the outline of the image, so I'll give two options.
#1 white background, black lines
<svg width="58" height="57" viewBox="0 0 58 57" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<!-- black filter -->
<filter id="BlackFilter" x="-20" y="-20" width="75" height="75">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0
"/>
</filter>
</defs>
<path id="path0_fill" d="M 0 0L 58 0L 58 57L 0 57L 0 0Z" fill="white"/>
<image id="image0" width="58" height="57" filter="url(#BlackFilter)" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA5CAYAAABnLziGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2NEU2MTVDOEVCQzJFNzExOEZEREJDOEMwMDc0QjFGOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NkI1NEZDMEVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NkI1NEZCRkVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgzNjI4N0NBMDFERkU3MTFBNjFFQzgyMkEyM0JDMTdBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0RTYxNUM4RUJDMkU3MTE4RkREQkM4QzAwNzRCMUY4Ii8+IDwvcmRmOkRl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" />
</svg>
#2 black background, white lines
<svg width="58" height="57" viewBox="0 0 58 57" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<!-- white filter -->
<filter id="WhiteFilter" x="-20" y="-20" width="75" height="75">
<feColorMatrix in="SourceGraphic" type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0
"/>
</filter>
</defs>
<path id="path0_fill" d="M 0 0L 58 0L 58 57L 0 57L 0 0Z" fill="black"/>
<image id="image0" width="58" height="57" preserveAspectRatio="none" filter="url(#WhiteFilter)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA5CAYAAABnLziGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2NEU2MTVDOEVCQzJFNzExOEZEREJDOEMwMDc0QjFGOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NkI1NEZDMEVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NkI1NEZCRkVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgzNjI4N0NBMDFERkU3MTFBNjFFQzgyMkEyM0JDMTdBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0RTYxNUM4RUJDMkU3MTE4RkREQkM4QzAwNzRCMUY4Ii8+IDwvcmRmOkRl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" />
</svg>

How to scale SVG

I've this svg file :
<svg version="1.1" id="archer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMax meet" x="0px" y="0px"
viewBox="0 0 63.3 88.4" style="enable-background:new 0 0 63.3 88.4;">
<style type="text/css">
<![CDATA[
.st0{fill:#FFFFFF;}
]]>
</style>
<path class="st0" d="M29.2,59l-2.1-1.5l1.1,0.7l-1.1-0.7c0-0.1,3.8-5.8,2.1-10.8c-1-3-3.9-5.3-8.5-6.8l0.8-2.5
c5.4,1.8,8.8,4.6,10.1,8.5C33.8,52.2,29.4,58.7,29.2,59"/>
<path class="st0" d="M2,59.5l-0.3-2.6c0.1,0,6.1-0.8,9.3-5.4c2.1-3,2.6-7.1,1.5-12l2.5-0.6c1.3,5.7,0.7,10.5-1.9,14.1
C9.2,58.6,2.3,59.5,2,59.5"/>
<path class="st0" d="M17.5,41.8C10.6,41.8,7.1,29.6,6.9,29c-0.8-4-0.6-11.7,6.4-13.3c0.2,0,5.1-1.1,8.5,1.6c2,1.6,3.1,4.1,3.2,7.4
c0.5,15-5.5,16.7-6.2,16.9C18.4,41.7,17.9,41.8,17.5,41.8 M15.7,18.1c-1.1,0-1.9,0.2-1.9,0.2C7.7,19.6,9.4,28,9.4,28.4
c0,0,3.5,11.9,8.9,10.7c0,0,4.5-1.4,4.1-14.3c-0.1-2.5-0.8-4.3-2.2-5.4C18.8,18.4,17,18.1,15.7,18.1"/>
<path class="st0" d="M34.6,36.6l-1.9-1.7c0.5-0.5,11.5-13.1-0.3-28.9l2.1-1.6C47.5,25,34.8,36.5,34.6,36.6"/>
<path class="st0" d="M15.5,14.1c-3.9,0-7.1-3.2-7.1-7.1c0-3.9,3.2-7.1,7.1-7.1c3.9,0,7.1,3.2,7.1,7.1C22.6,11,19.4,14.1,15.5,14.1
M15.5,2.6c-2.5,0-4.5,2-4.5,4.5c0,2.5,2,4.5,4.5,4.5c2.5,0,4.5-2,4.5-4.5C20,4.6,18,2.6,15.5,2.6"/>
<path class="st0" d="M6.7,23.7c-0.1,0-0.3,0-0.4-0.1l-5.4-1.9c-0.7-0.2-1-1-0.8-1.7c0.2-0.7,1-1,1.7-0.8l5.4,1.9
c0.7,0.2,1,1,0.8,1.7C7.7,23.4,7.2,23.7,6.7,23.7"/>
<path class="st0" d="M41.2,21.8H1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h39.9c0.7,0,1.3,0.6,1.3,1.3
C42.5,21.2,41.9,21.8,41.2,21.8"/>
</svg>
The problem is that my svg render like this :
There's a white space under the figure and I want to know how to scale it to fit the container.
Thanks for your help

Change the size of your viewBox:
e.g. viewBox="0 0 60 62"
Working Example:
body {
background-color: rgb(0,0,0);
}
svg {
width: 128px;
height: 176px;
margin-right: 24px;
border: 1px solid rgb(255,255,255);
vertical-align: top;
}
svg:nth-of-type(2) {
height: 140px;
overflow: hidden;
}
<svg version="1.1" id="archer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMax meet" x="0px" y="0px"
viewBox="0 0 63.3 88.4" style="enable-background:new 0 0 63.3 88.4;">
<style type="text/css">
<![CDATA[
.st0{fill:#FFFFFF;}
]]>
</style>
<path class="st0" d="M29.2,59l-2.1-1.5l1.1,0.7l-1.1-0.7c0-0.1,3.8-5.8,2.1-10.8c-1-3-3.9-5.3-8.5-6.8l0.8-2.5
c5.4,1.8,8.8,4.6,10.1,8.5C33.8,52.2,29.4,58.7,29.2,59"/>
<path class="st0" d="M2,59.5l-0.3-2.6c0.1,0,6.1-0.8,9.3-5.4c2.1-3,2.6-7.1,1.5-12l2.5-0.6c1.3,5.7,0.7,10.5-1.9,14.1
C9.2,58.6,2.3,59.5,2,59.5"/>
<path class="st0" d="M17.5,41.8C10.6,41.8,7.1,29.6,6.9,29c-0.8-4-0.6-11.7,6.4-13.3c0.2,0,5.1-1.1,8.5,1.6c2,1.6,3.1,4.1,3.2,7.4
c0.5,15-5.5,16.7-6.2,16.9C18.4,41.7,17.9,41.8,17.5,41.8 M15.7,18.1c-1.1,0-1.9,0.2-1.9,0.2C7.7,19.6,9.4,28,9.4,28.4
c0,0,3.5,11.9,8.9,10.7c0,0,4.5-1.4,4.1-14.3c-0.1-2.5-0.8-4.3-2.2-5.4C18.8,18.4,17,18.1,15.7,18.1"/>
<path class="st0" d="M34.6,36.6l-1.9-1.7c0.5-0.5,11.5-13.1-0.3-28.9l2.1-1.6C47.5,25,34.8,36.5,34.6,36.6"/>
<path class="st0" d="M15.5,14.1c-3.9,0-7.1-3.2-7.1-7.1c0-3.9,3.2-7.1,7.1-7.1c3.9,0,7.1,3.2,7.1,7.1C22.6,11,19.4,14.1,15.5,14.1
M15.5,2.6c-2.5,0-4.5,2-4.5,4.5c0,2.5,2,4.5,4.5,4.5c2.5,0,4.5-2,4.5-4.5C20,4.6,18,2.6,15.5,2.6"/>
<path class="st0" d="M6.7,23.7c-0.1,0-0.3,0-0.4-0.1l-5.4-1.9c-0.7-0.2-1-1-0.8-1.7c0.2-0.7,1-1,1.7-0.8l5.4,1.9
c0.7,0.2,1,1,0.8,1.7C7.7,23.4,7.2,23.7,6.7,23.7"/>
<path class="st0" d="M41.2,21.8H1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h39.9c0.7,0,1.3,0.6,1.3,1.3
C42.5,21.2,41.9,21.8,41.2,21.8"/>
</svg>
<svg version="1.1" id="archer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMax meet" x="0px" y="0px"
viewBox="0 0 60 62" style="enable-background:new 0 0 63.3 88.4;">
<style type="text/css">
<![CDATA[
.st0{fill:#FFFFFF;}
]]>
</style>
<path class="st0" d="M29.2,59l-2.1-1.5l1.1,0.7l-1.1-0.7c0-0.1,3.8-5.8,2.1-10.8c-1-3-3.9-5.3-8.5-6.8l0.8-2.5
c5.4,1.8,8.8,4.6,10.1,8.5C33.8,52.2,29.4,58.7,29.2,59"/>
<path class="st0" d="M2,59.5l-0.3-2.6c0.1,0,6.1-0.8,9.3-5.4c2.1-3,2.6-7.1,1.5-12l2.5-0.6c1.3,5.7,0.7,10.5-1.9,14.1
C9.2,58.6,2.3,59.5,2,59.5"/>
<path class="st0" d="M17.5,41.8C10.6,41.8,7.1,29.6,6.9,29c-0.8-4-0.6-11.7,6.4-13.3c0.2,0,5.1-1.1,8.5,1.6c2,1.6,3.1,4.1,3.2,7.4
c0.5,15-5.5,16.7-6.2,16.9C18.4,41.7,17.9,41.8,17.5,41.8 M15.7,18.1c-1.1,0-1.9,0.2-1.9,0.2C7.7,19.6,9.4,28,9.4,28.4
c0,0,3.5,11.9,8.9,10.7c0,0,4.5-1.4,4.1-14.3c-0.1-2.5-0.8-4.3-2.2-5.4C18.8,18.4,17,18.1,15.7,18.1"/>
<path class="st0" d="M34.6,36.6l-1.9-1.7c0.5-0.5,11.5-13.1-0.3-28.9l2.1-1.6C47.5,25,34.8,36.5,34.6,36.6"/>
<path class="st0" d="M15.5,14.1c-3.9,0-7.1-3.2-7.1-7.1c0-3.9,3.2-7.1,7.1-7.1c3.9,0,7.1,3.2,7.1,7.1C22.6,11,19.4,14.1,15.5,14.1
M15.5,2.6c-2.5,0-4.5,2-4.5,4.5c0,2.5,2,4.5,4.5,4.5c2.5,0,4.5-2,4.5-4.5C20,4.6,18,2.6,15.5,2.6"/>
<path class="st0" d="M6.7,23.7c-0.1,0-0.3,0-0.4-0.1l-5.4-1.9c-0.7-0.2-1-1-0.8-1.7c0.2-0.7,1-1,1.7-0.8l5.4,1.9
c0.7,0.2,1,1,0.8,1.7C7.7,23.4,7.2,23.7,6.7,23.7"/>
<path class="st0" d="M41.2,21.8H1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h39.9c0.7,0,1.3,0.6,1.3,1.3
C42.5,21.2,41.9,21.8,41.2,21.8"/>
</svg>

DevExpress dashboard control - Show text on bar chart axis labels

I have a bar chart control inside a DevExpress dashboard control which looks like this
g text {
font-weight: bold !important;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill="none" stroke="none" stroke-width="0" class="dxc dxc-chart" style="line-height:normal;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);display:block;overflow:hidden;touch-action:pan-x pan-y pinch-zoom;-ms-touch-action:pan-x pan-y pinch-zoom;"
width="798" height="516" onclick="void(0)" direction="ltr">
<defs>
<clipPath id="DevExpress_14">
<rect x="22" y="10" width="754" height="484" transform="translate(0,0)"></rect>
</clipPath>
<pattern id="DevExpress_15" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_16" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_17" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_18" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_19" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_20" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_21" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_22" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_23" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_24" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_25" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_26" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_27" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<pattern id="DevExpress_28" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect>
<path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path>
</pattern>
<clipPath id="DevExpress_29">
<rect x="87" y="10" width="689" height="458" transform="translate(0,0)"></rect>
</clipPath>
<clipPath id="DevExpress_30">
<rect x="87" y="10" width="689" height="458" transform="translate(0,0)"></rect>
</clipPath>
</defs>
<rect x="22" y="10" width="754" height="484" transform="translate(0,0)" fill="gray" opacity="0.0001"></rect>
<g class="dxc-background"></g>
<g class="dxc-strips-group">
<g class="dxc-arg-strips" clip-path="url(#DevExpress_29)"></g>
<g class="dxc-val-strips" clip-path="url(#DevExpress_29)"></g>
</g>
<g class="dxc-grids-group">
<g class="dxc-val-grid">
<path d="M 87 431 L 776 431" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
<path d="M 87 395 L 776 395" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
<path d="M 87 358 L 776 358" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
<path d="M 87 321 L 776 321" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
<path d="M 87 285 L 776 285" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
<path d="M 87 248 L 776 248" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
<path d="M 87 212 L 776 212" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
<path d="M 87 175 L 776 175" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
<path d="M 87 138 L 776 138" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
<path d="M 87 102 L 776 102" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
<path d="M 87 65 L 776 65" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
<path d="M 87 28 L 776 28" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path>
</g>
<g class="dxc-arg-grid"></g>
</g>
<g class="dxc-axes-group">
<g class="dxc-arg-axis" clip-path="url(#DevExpress_14)">
<g class="dxc-arg-elements">
<text x="136" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 1</text>
<text x="235" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 2</text>
<text x="333" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 3</text>
<text x="432" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 4</text>
<text x="530" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 5</text>
<text x="628" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 6</text>
<text x="727" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 7</text>
</g>
<g class="dxc-arg-line">
<path d="M 87 468 L 776 468" transform="translate(0,0.5)" stroke-width="1" stroke="#d3d3d3"></path>
</g>
<g class="dxc-arg-title"></g>
</g>
<g class="dxc-val-axis" clip-path="url(#DevExpress_14)">
<g class="dxc-val-elements">
<text x="77" y="473" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">0K</text>
<text x="77" y="436" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">10K</text>
<text x="77" y="400" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">20K</text>
<text x="77" y="363" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">30K</text>
<text x="77" y="326" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">40K</text>
<text x="77" y="290" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">50K</text>
<text x="77" y="253" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">60K</text>
<text x="77" y="217" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">70K</text>
<text x="77" y="180" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">80K</text>
<text x="77" y="143" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">90K</text>
<text x="77" y="107" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">100K</text>
<text x="77" y="70" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">110K</text>
<text x="77" y="33" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">120K</text>
</g>
<g class="dxc-val-line">
<path d="M 87 468 L 87 10" transform="translate(0.5,0)" stroke-width="1" stroke="#d3d3d3"></path>
</g>
<g class="dxc-val-title">
<text x="40" y="239" transform="translate(0,0) rotate(270,40,239)" style="fill:#767676;font-size:16px;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;cursor:default;" text-anchor="middle">Y Axis Title</text>
</g>
</g>
</g>
<g class="dxc-constant-lines-group">
<g class="dxc-arg-constant-lines"></g>
<g class="dxc-val-constant-lines"></g>
</g>
<g class="dxc-strips-labels-group">
<g class="dxc-arg-axis-labels"></g>
<g class="dxc-val-axis-labels"></g>
</g>
<g class="dxc-border">
<path d="M 87.5 10.5 L 775.5 10.5 L 775.5 467.5 L 87.5 467.5 L 87.5 10.5 Z" transform="translate(0,0)" fill="none" stroke="#d3d3d3" stroke-width="1" stroke-linecap="square"></path>
</g>
<g class="dxc-series-group">
<g class="dxc-series">
<g fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0" class="dxc-markers" opacity="1" clip-path="" transform="translate(0,0) scale(1,1)">
<rect x="101" y="346" width="69" height="122" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect>
<rect x="200" y="402" width="69" height="66" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect>
<rect x="298" y="440" width="69" height="28" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect>
<rect x="397" y="75" width="69" height="393" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect>
<rect x="495" y="107" width="69" height="361" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect>
<rect x="593" y="220" width="69" height="248" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect>
<rect x="692" y="360" width="69" height="108" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect>
</g>
</g>
<g class="dxc-series">
<g class="dxc-elements" stroke="rgb(95,139,149)" stroke-width="2" clip-path="url(#DevExpress_30)"></g>
<g fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0" r="6" visibility="hidden" class="dxc-markers" opacity="0.001" clip-path="url(#DevExpress_30)"></g>
</g>
</g>
<g class="dxc-labels-group">
<g class="dxc-labels" clip-path="url(#DevExpress_30)" opacity="1" transform="translate(0,0)">
<g visibility="visible">
<g transform="translate(115,329)">
<rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect>
<text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$33,200</text>
</g>
</g>
<g visibility="visible">
<g transform="translate(214,385)">
<rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect>
<text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$18,000</text>
</g>
</g>
<g visibility="visible">
<g transform="translate(315,423)">
<rect x="-8" y="-17" width="51" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect>
<text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$7,600</text>
</g>
</g>
<g visibility="visible">
<g transform="translate(408,58)">
<rect x="-8" y="-17" width="64" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect>
<text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$107,300</text>
</g>
</g>
<g visibility="visible">
<g transform="translate(509,90)">
<rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect>
<text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$98,500</text>
</g>
</g>
<g visibility="visible">
<g transform="translate(607,203)">
<rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect>
<text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$67,800</text>
</g>
</g>
<g visibility="visible">
<g transform="translate(706,343)">
<rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect>
<text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$29,500</text>
</g>
</g>
</g>
<g class="dxc-labels" clip-path="url(#DevExpress_30)" opacity="0.001" transform="translate(0,0)"></g>
</g>
<g class="dxc-crosshair-cursor"></g>
<g class="dxc-legend" clip-path="url(#DevExpress_14)"></g>
</svg>
I need to show custom tool tip when hovering over the X Axis titles i.e. Bar 1-7.
The SVG is auto generated, which is controlled from an XML file having Dashboard details. Refer Step 17
I believe, we need to change this generated Dashboard XML
My question here is:
Is it possible to show a (mouse hover) title on X axis titles?
Any suggestions, kind folks?

To customize Axis Labels, configure the dxChart used to display the Chart Item directly. Please review the Access to Underlying Widgets article where how to access the dxChart widget is described.
To customize the label hint, define the dxChart.argumentAxis.label.customizeHint function. This solution is described in this thread

Categories