Browse Source

made svg responsive

master
alicestrt 4 years ago
parent
commit
550eeaa373
  1. 20
      static/css/style.css
  2. 18
      templates/hello.html

20
static/css/style.css

@ -1,6 +1,6 @@
/* Everything*/ /* Everything*/
* { * {
border: 0px black solid; border: 1px black solid;
} }
/*Main areas*/ /*Main areas*/
@ -29,23 +29,23 @@ max-height:500px;
/* circles */ /* circles */
#first_circle { #first_circle {
width: 80%; width: 100%;
height: 80%; height: 100%;
} }
#second_circle { #second_circle {
width: 80%; width: 100%;
height: 80%; height: 100%;
} }
@media all and (max-width: 250px) { @media all and (max-width: 350px) {
#first_circle { #first_circle {
width: 4rem; width: 100%;
height: 4rem; height: 100%;
} }
#second_circle { #second_circle {
width: 4rem; width: 100%;
height: 4rem; height: 100%;
} }
} }
draggable { draggable {

18
templates/hello.html

@ -6,19 +6,21 @@
<!-- <div class="map_area">Map area<div id="circle-1" onclick="scrolldiv()"> --> <!-- <div class="map_area">Map area<div id="circle-1" onclick="scrolldiv()"> -->
<div class="map_area">Map area <div class="map_area">Map area
<div class="row"> <div class="row">
<div class="col-md-1 col-sm-4"> <div class="col-md-2 mx-auto">
<div id="first_circle">
<svg id="first_circle"> <svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="2rem" stroke="green" stroke-width="4" fill="yellow" /> <circle cx="50" cy="50" r="2rem" stroke="black" stroke-width="2" fill="gray" />
<text x="50" y="50" text-anchor="middle">hello </text> <text x="50" y="50" text-anchor="middle">hello </text>
</svg> </svg>
</div>
</div> </div>
<div class="col-md-1 col-sm-4"> <div class="col-md-2 mx-auto">
<div id="second_circle">
<svg id="second_circle"> <svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r='2rem' stroke="red" stroke-width="2" fill="gray" /> <circle cx="50" cy="50" r='2rem' stroke="black" stroke-width="2" fill="gray" />
<text x="50" y="50" text-anchor="middle">hello boys </text> <text x="50" y="50" text-anchor="middle">hello boys </text>
</svg> </svg>
</div>
</div> </div>

Loading…
Cancel
Save