I have the following code
<div id="someDiv" style="float: right; margin-right: -350px; position: relative; overflow-x: hidden; overflow-y: auto;">
<svg class="someSvgClass" width="105">
<g>..</g>
<g>..</g>
...
</svg>
</div>
This div contains inside another div with a fixed height.These "g" elements are added dynamically using JavaScript.
So I expect a scroll bar when the no of "g" elements is increased
In IE11 I could able to see the scroll bar when the no of "g" elements are high. But for the same no of elements I was not able to see scroll bar in Firefox and in chrome
anyone please tell me what is gone wrong here
here is a sample fiddle
I'm not an SVG expert, i never used it, but seems SVG doesn't change height. If you set height to the SVG it works: http://jsfiddle.net/u5ymhmht/7/
The practical solution in your js when you add a line, add height of the line to SVG.
p.s. Sorry for the previous misunderstanding.
svg {
height:500px;
}
#Someid {
height: 150px;
overflow-x: hidden;
overflow-y auto;
}
<div id="Someid">
<svg width="105">
<g transform="translate(10,5)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,20)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,35)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,50)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,65)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,80)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,95)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,110)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,125)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,140)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,155)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,170)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,185)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,200)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
</svg>
</div>
Related
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.
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>
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>
I have a group of elements that when toggled with the .active class, extend their max-height and animate out. I'm hitting a problem though when removing the .active class, I'm not getting the animation back to the closed state.
document.getElementById("show-all").addEventListener("click", function(e) {
const elements = document.querySelectorAll('.horizontalBarGraphContainer');
elements.forEach((item) => {
item.classList.toggle('active');
});
});
* {
font-family: Helvetica, sans-serif;
font-size: 100%;
}
.horizontalBarGraphContainer {
background: #fff;
max-height: 1000px;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
padding: 30px 30px 0;
transition: max-height 1s ease-in !important;
}
.horizontalBarGraphContainer:not(:first-child) {
height: 0;
max-height: 0;
overflow: hidden;
padding: 0;
transition: max-height 0.5s ease-out;
}
.horizontalBarGraphContainer:not(:first-child).active {
height: auto;
display: block;
max-height: 1000px;
padding: 30px 30px 0;
transition: max-height 0.25s ease-in;
}
<div class="ct TestResultContainer__graph-container">
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Pick A or B</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 170px; position: relative;"><svg width="1020" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="710" y="0" x="240" height="45" fill="#000">A</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">A</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="950">54</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="950" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="617.9629629629629" y="0" x="240" height="45" fill="#4dbf9d">B</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">B</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="857.9629629629629">47</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="857.9629629629629" dy="55" text-anchor="end"></text></g></svg></div>
</div>
</div>
</div>
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Car or boat?</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 170px; position: relative;"><svg width="1080" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#000">Boat</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Boat</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">58</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="570.8620689655173" y="0" x="240" height="45" fill="#4dbf9d">Car?</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car?</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="810.8620689655173">43</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="810.8620689655173" dy="55" text-anchor="end"></text></g></svg></div>
</div>
</div>
</div>
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Moon, Sun or Car?</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 250px; position: relative;"><svg width="1080" height="250"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#4dbf9d">Car</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">35</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end"></text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="726" y="0" x="240" height="45" fill="#4dbf9d">Sun</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Sun</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end"></text></g><g transform="translate(0, 160)" style="transform: translateY(160px);"><rect width="726" y="0" x="240" height="45" fill="#000">Moon</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Moon</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end">Your answer</text></g></svg></div>
</div>
</div>
</div>
</div>
<div class="ct TestResultContainer--horizontal-bar--show-all-wrapper"><button id="show-all" class="ct TestResultContainer ct TestResultContainer--horizontal-bar--show-all crux-label-style"><span class="ct TestResultContainer--horizontal-bar--show-all-copy"><span class="ct TestResultContainer--horizontal-bar--show-all-txt active"></span><!-- react-text: 136 --> Toggle Results <!-- /react-text --><span id="show-all" class="crux-icons crux-icons-caret-up-big"></span></span></button></div>
Codepen Example here:
https://codepen.io/serpicolugnut/pen/XYRxVB
The animation works when adding .active to the items and increasing the max-height from 0 to 1000px, but not in the inverse.
The two main things you need to do is:
remove height: 0 from .horizontalBarGraphContainer:not(:first-child)
And as height: auto is the default you can remove that too in .horizontalBarGraphContainer:not(:first-child).active)
adjust the max-height in .horizontalBarGraphContainer:not(:first-child).active
Stack snippet
document.getElementById("show-all").addEventListener("click", function(e) {
const elements = document.querySelectorAll('.horizontalBarGraphContainer');
elements.forEach((item) => {
item.classList.toggle('active');
});
});
* {
font-family: Helvetica, sans-serif;
font-size: 100%;
}
.horizontalBarGraphContainer {
background: #fff;
max-height: none;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
padding: 30px 30px 0;
transition: max-height 1s ease-in;
}
.horizontalBarGraphContainer:not(:first-child) {
max-height: 0;
overflow: hidden;
padding: 0;
transition: max-height 0.5s ease-out;
}
.horizontalBarGraphContainer:not(:first-child).active {
display: block;
max-height: 300px;
padding: 30px 30px 0;
}
<div class="ct TestResultContainer__graph-container">
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Pick A or B</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 170px; position: relative;"><svg width="1020" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="710" y="0" x="240" height="45" fill="#000">A</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">A</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="950">54</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="950" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="617.9629629629629" y="0" x="240" height="45" fill="#4dbf9d">B</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">B</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="857.9629629629629">47</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="857.9629629629629" dy="55" text-anchor="end"></text></g></svg></div>
</div>
</div>
</div>
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Car or boat?</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 170px; position: relative;"><svg width="1080" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#000">Boat</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Boat</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">58</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="570.8620689655173" y="0" x="240" height="45" fill="#4dbf9d">Car?</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car?</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="810.8620689655173">43</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="810.8620689655173" dy="55" text-anchor="end"></text></g></svg></div>
</div>
</div>
</div>
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Moon, Sun or Car?</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 250px; position: relative;"><svg width="1080" height="250"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#4dbf9d">Car</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">35</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end"></text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="726" y="0" x="240" height="45" fill="#4dbf9d">Sun</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Sun</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end"></text></g><g transform="translate(0, 160)" style="transform: translateY(160px);"><rect width="726" y="0" x="240" height="45" fill="#000">Moon</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Moon</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end">Your answer</text></g></svg></div>
</div>
</div>
</div>
</div>
<div class="ct TestResultContainer--horizontal-bar--show-all-wrapper"><button id="show-all" class="ct TestResultContainer ct TestResultContainer--horizontal-bar--show-all crux-label-style"><span class="ct TestResultContainer--horizontal-bar--show-all-copy"><span class="ct TestResultContainer--horizontal-bar--show-all-txt active"></span><!-- react-text: 136 --> Toggle Results <!-- /react-text --><span id="show-all" class="crux-icons crux-icons-caret-up-big"></span></span></button></div>
I want to automatically scroll to the middle in the horizontal dimension, such that the red line (which is placed right in the middle of the svg) is in the middle.
Which values do I have to choose for scrollLeft?
var div = $('.container');
div.animate({
scrollLeft: div.width() / 2 + div.offset().left
});
.container {
height: 200px;
width: 400px;
border: 1px solid black;
overflow: scroll;
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
<svg width="1000" height="400">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="200" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="600" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="40" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="960" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<line x1="499" y1="0" x2="499" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</div>
You should be setting the scrollLeft property like below:
div.find('svg').width() / 2 - div.width() / 2
See demo below:
var div = $('.container');
div.animate({
scrollLeft: div.find('svg').width() / 2 - div.width() / 2
});
.container {
height: 200px;
width: 400px;
border: 1px solid black;
overflow: scroll;
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
<svg width="1000" height="400">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="200" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="600" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="40" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="960" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<line x1="499" y1="0" x2="499" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</div>