testing SVG options

by jpeter06

HTML

<div class="round" onclick="showBackground()" style="left:0.5em"></div>

<riot-container id="id1" onclick="mover(1)" class="p_lt fondoComponentes" style="width:36%;height:36%;left:2%;top:11%;">
    <div class="round" onclick="mover(1)"></div>
    <h1>Título 1</h1>
</riot-container>
<riot-container id="id2" onclick="mover(2)" class="p_rt fondoComponentes" style="width:58%;height:36%;left:40%;top:11%;">
       <div class="round" onclick="mover(2)"></div>
    <h1>Título 2</h1>
    <h3>Contendio del título 2</h3>
</riot-container>
<riot-container id="id3" onclick="mover(3)" class="p_lb fondoComponentes" style="width:56%;height:46%;top:50%;left:2%;">
       <div class="round" onclick="mover(3)"></div>
    <h1>Título 3</h1>
</riot-container>

<riot-container id="id4" onclick="mover(4)" class="p_rb fondoComponentes" style="width:38%;height:46%;left:60%;top:50%;">
       <div class="round" onclick="mover(4)"></div>
    <h1>Título 4</h1>
</riot-container>

<svg width="100%"  height ="100%" style="position:absolute; z-index:-1">
  <defs>
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.2"/>
      </feComponentTransfer>
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
  <rect fill='#80d0f0' x='0' y='0' width='100%' height='100%'  filter='url(#dropshadow)'  transform = 'rotate(-45 100 100)'/>
<rect fill='#80d0ff' x='30%' y='30%' width='100%' height='100%'  filter='url(#dropshadow)'   transform = 'rotate(-45)'/>
<rect fill='#80c0ea' x='0%' y='0%' width='100%' height='100%' filter='url(#dropshadow)'  transform = 'translate(50,10) rotate(45)'/>
</svg>

CSS

html,body{
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
    overflow-x: hidden;
    overflow-y: hidden;
    font-family:arial;
}

body {
    /*
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><defs><filter id='dropshadow' height='130%'><feGaussianBlur in='SourceAlpha' stdDeviation='3'/><feOffset dx='2' dy='2' result='offsetblur'/><feComponentTransfer><feFuncA type='linear' slope='0.2'/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></defs><rect fill='%2380d0f0' x='0' y='0' width='100%' height='100%'  filter='url(#dropshadow)'  transform = 'rotate(-45 100 100)'/><rect fill='%2380d0ff' x='30%' y='30%' width='100%' height='100%'  filter='url(#dropshadow)'   transform = 'rotate(-45)'/><rect fill='%2380c0ea' x='0%' y='0%' width='100%' height='100%' filter='url(#dropshadow)'  transform = 'translate(50,10) rotate(45)'/></svg>");*/
background-color:#6FC0E0;
}

h1{
    margin-top: 0.2em;
  font-weight: lighter;
    font-size:1.5em;
  border-bottom: solid;
    text-align: left;
    margin-left:0.2em;
    margin-right:0.2em;
    border-width: thin;
}

riot-container{
  box-sizing: border-box;
  display: block;
    position:absolute;
    left:0px;
    padding:2px;
        -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
 }

.round{
    display:block;
    position:absolute;
    width:1.0em; 
    height:1.0em;
    border-radius: 1.0em;
    /*background:white;*/
    right: 0.5em;
    margin-top:0.3em;
    border:0.2em solid white;
    cursor: pointer;
    border-width: thin;
}
.round:hover{
    background:rgba(255,255,255,0.5);
}

.p_lt.moveOut {    transform: translate(-300px, -300px);}
.p_rt.moveOut {    transform: translate(300px, -300px);}
.p_lb.moveOut {    transform: translate(-300px, 300px);}
.p_rb.moveOut{    transform: translate(120%,...

JavaScript

function showPos(obj){
    var rect = obj.getBoundingClientRect();
    console.log("x:",rect.left," y:",rect.top, " w:",rect.right-rect.left, " h:",rect.bottom-rect.top);
}
function mover(pos){
    var fs=$("#id"+pos).hasClass( "showAll" );
    showPos($("#id"+pos)[0]);
    for(var i=1;i<5;i++){
        if(i==pos){
             $('#id'+i).toggleClass('showAll');
        }else{
            if(fs){
                $('#id'+i).removeClass('moveOut');            
            }else
                $('#id'+i).addClass('moveOut');
        } 
    }
    event.stopPropagation();
}

function showBackground(){
    var fs=$("#id1").hasClass( "showAll" ) ||     $("#id1").hasClass( "moveOut" ) ;
    for(var i=1;i<5;i++){
            if(fs){
                $('#id'+i).removeClass('moveOut'); 
                $('#id'+i).removeClass('showAll'); 
            }else
                $('#id'+i).addClass('moveOut');
      } 
}