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>
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>
#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.
i' m trying to make a circular timeline with SVG.
i m using a fullpage js
so i made a blue line working progressivly on scroll around the circle but now i want that my anchors dash array appears too but i can t find the solution, i want my anchors appear and stay when i scroll down ( like a timeline ) and come back to grey when scroll up
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));
}
});
});
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,1);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft, #smallbluebottom, #smallblueright{
stroke-dasharray:40;
stroke-dashoffset:40;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
stroke-dashoffset:0;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
h2{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>
<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>
<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>
<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="accueil">
<h2>first</h2>
</div>
<div class="section" id="don">
<h2>second</h2>
</div>
<div class="section" id="tri">
<h2>3rd</h2>
</div>
<div class="section" id="recycle">
<h2>4th</h2>
</div>
<div class="section" id="vente">
<h2>last</h2>
</div>
</div>
my code :
Simply add an array which will contain each of your circles' id and change their css in the onleave event after looking for the object returned by the event :
var smallCircles= ['top','right','bottom','left','top'];
...
onLeave: function(...
if(direction=='up'){
$('#smallblue'+smallCircles[nextIndex]).css('stroke-dashoffset', '40');
}
$('#smallblue'+smallCircles[nextIndex-1]).css('stroke-dashoffset', '0');
var smallCircles= ['top','right','bottom','left','top'];
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));
if(direction=='up'){$('#smallblue'+smallCircles[nextIndex]).css('stroke-dashoffset', '40');}
$('#smallblue'+smallCircles[nextIndex-1]).css('stroke-dashoffset', '0');
}
});
});
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,1);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft, #smallbluebottom, #smallblueright, #smallbluetop{
stroke-dasharray:40;
stroke-dashoffset:40;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft:hover, #smallbluebottom:hover, smallbluetop:hover, #smallblueright:hover{
stroke-dashoffset:0;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
h2{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>
<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>
<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>
<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="accueil">
<h2>first</h2>
</div>
<div class="section" id="don">
<h2>second</h2>
</div>
<div class="section" id="tri">
<h2>3rd</h2>
</div>
<div class="section" id="recycle">
<h2>4th</h2>
</div>
<div class="section" id="vente">
<h2>last</h2>
</div>
</div>