How to scale SVG - javascript
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>
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 set svg element as background-image in div?
I have svg element that created during runtime on the page (it is create by another library).
Is it possible to use this svg (id="svg1") as background-image to another div?
<div style="height:300px;background-image:url(..svg1...)"></div>
svg1:
<svg id="svg1" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="xMidYMid meet">
<rect . . . > . . . </rect>
</svg>
If it possible to do that in css only it will be great
<svg id="svg1" viewBox="0 0 270 180" version="1.1" preserveAspectRatio="xMidYMid meet"><rect clip-path="url(#gwvlzeb48ee)" x="0" y="0" width="270" height="180" style="fill: url("#hz0tt22rgsn");"></rect><defs><clipPath id="gwvlzeb48ee"><rect x="0" y="0" rx="0" ry="0" width="270" height="140"></rect><rect x="0" y="145" rx="3" ry="3" width="150" height="15"></rect><rect x="0" y="165" rx="3" ry="3" width="150" height="15"></rect><rect x="220" y="145" rx="3" ry="3" width="50" height="15"></rect><rect x="220" y="165" rx="3" ry="3" width="50" height="15"></rect></clipPath><linearGradient id="hz0tt22rgsn"><stop offset="0.482599" stop-color="#e9e9e9" stop-opacity="1"><animate attributeName="offset" values="-2; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="0.982599" stop-color="#efefef" stop-opacity="1"><animate attributeName="offset" values="-1.5; 1.5" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="1.4826" stop-color="#e9e9e9" stop-opacity="1"><animate attributeName="offset" values="-1; 2" dur="2s" repeatCount="indefinite"></animate></stop></linearGradient></defs></svg>
<div style="border:1px solid red; height:300px; background-image:url(#svg1);"></div>
Also this not working:
<!-- language: lang-html -->
<svg height="100" width="100" id="svg1">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
Sorry, your browser does not support inline SVG.
</svg>
<div style="border:1px solid red;height:300px; background-image:url(#svg1);"></div>
<!-- end snippet -->
You can write the SVG right in your CSS. It's also possible to use background-repeat and all other background-attribues with this approach too.
div {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />\
Sorry, your browser does not support inline SVG. \
</svg> ') 0 / auto 100%;
}
<div style="height: 50px">
</div>
You can also place the SVG inside of the div and stretch it to cover with CSS. The benefits of this approach is you can style the SVG with CSS, as opposed to inlining it in the CSS using background-image. It all depends on your particular use case.
Demo: https://codepen.io/tedw/pen/bGbKGPB?editors=1100
.box {
border: 1px solid blue;
margin-bottom: 50px;
position: relative;
}
.example-1 {
height: 150px;
width: 300px;
}
.example-2 {
height: 200px;
width: 200px;
}
.example-3 {
height: 200px;
width: 100px;
}
svg {
fill: red;
height: 100%;
left: 0;
position: absolute;
top: 0;
stroke: black;
stroke-width: 3;
width: 100%;
}
<!-- Example 1 -->
<div class="box example-1">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="40"/>
</svg>
</div>
<!-- Example 2 -->
<div class="box example-2">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="40"/>
</svg>
</div>
<!-- Example 3 -->
<div class="box example-3">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="40"/>
</svg>
</div>
Position elements around a circular image
#absolute-canvas a {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
border-radius: 100%;
background: black;
}
.deg0 {
transform: translate(12em);
} /* 12em = half the width of the wrapper */
.deg45 {
transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.deg135 {
transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.deg180 {
transform: translate(-12em);
}
.deg225 {
transform: rotate(225deg) translate(12em) rotate(-225deg);
}
.deg315 {
transform: rotate(315deg) translate(12em) rotate(-315deg);
}
<section id="absolute-canvas">
<img src="./images/logoWithShadow.png" id="logo" class="img-responsive animated zoomIn" alt="" title="СП ФИНКИ" />
<div id="nav-container">
<a href='#' class='deg0'></a>
<a href='#' class='deg45'></a>
<a href='#' class='deg135'></a>
<a href='#' class='deg180'></a>
<a href='#' class='deg225'></a>
<a href='#' class='deg315'></a>
</div>
</section>
My current solution works however when the image scales down (decreases in size) I want to keep the circles around the same image. How can I accomplish this?
Image of what I'm trying to accomplish:
The central div is an image that's infact a circle.
Using SVG <circle> elements you can do this:
body {
margin: 0;
height: 100vh;
display: flex;
}
.circle-container {
flex: 1;
}
.circle {
color: #2F7285;
}
.circle--main {
color: #5E66FF;
}
<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
<circle class="circle circle--main" cx="50%" cy="50%" r="200" stroke="currentColor" stroke-width="6" fill="currentColor" />
<circle class="circle circle--one" cx="50%" cy="20%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--two" cx="75%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--three" cx="75%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--four" cx="50%" cy="80%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--five" cx="25%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--six" cx="25%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
</svg>
If you want to include an image, you can use a SVG pattern.
body {
margin: 0;
height: 100vh;
display: flex;
}
.circle-container {
flex: 1;
}
.circle {
color: #2F7285;
}
<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
<defs>
<pattern id="image" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 200 200">
<image x="0%" y="0%" width="200" height="200" xlink:href="http://placehold.it/200x200"></image>
</pattern>
</defs>
<circle class="circle circle--main" cx="50%" cy="50%" r="200" stroke-width="6" fill="url(#image)" />
<circle class="circle circle--one" cx="50%" cy="20%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--two" cx="75%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--three" cx="75%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--four" cx="50%" cy="80%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--five" cx="25%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--six" cx="25%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
</svg>
Have in mind that since you are using the same shape, instead of creating different elements you could create a SVG Spritesheet and reuse the circle shape with the <use> tag, only if there is no deeper manipulation for each circle element.
unable to align HTML and SVG elements using CSS
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