Skip to content

Instantly share code, notes, and snippets.

@ramayac

ramayac/gist:8308800

Created January 7, 2014 23:24
Show Gist options
  • Save ramayac/8308800 to your computer and use it in GitHub Desktop.
Save ramayac/8308800 to your computer and use it in GitHub Desktop.
Download ZIP
Outline
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>Llenar persona</title>
<!--meta name="og:url" content="http://stackoverflow.com/questions/15474306/nesting-an-svg-inside-a-div"/-->
<script type="text/javascript">
</script>
<style type="text/css">
#container {
//background: rgba( 0, 0, 0, 0.10);
margin-left:auto;
margin-right:auto;
width: 765px;
position: relative;
/*border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-top: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 30px;
padding-top: 5px;*/
}
#silueta {
position: absolute;
}
#silueta .mujer {
fill: rgba( 0, 0, 0, 0.50);
}
/*.mujer:hover {
fill: #ace63c;
}*/
#glass {
//background: rgba( 255, 255, 255, 0.50);
border: 1px solid #bbb;
border-top: 1px solid #eee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 765px;
height: 990px;
position: relative;
float: left;
}
#water {
//background-image: url("waves.png");
background-color: #9CC6FF;
background-position: top right;
position: absolute;
bottom: 0px;
width: 765px;
height: 10px;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
transition: all 3s ease-out;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#container:hover #water {
height: 990px;
background-position: top left;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
transition: all 3s ease-out;
}
</style>
</head>
<body>
<div id="container">
<div id="glass">
<div id="water"></div>
</div>
<div id="silueta">
<svg width="765" height="990" xmlns="http://www.w3.org/2000/svg">
<metadata id="metadata3615">image/svg+xml</metadata>
<g>
<title>Mujer Outline</title>
<g externalResourcesRequired="false" id="layer1">
<path class="mujer" fill="#000000" fill-rule="nonzero" id="path3445" d="m470.399384,381.290253c0.644592,-0.165924 1.264893,-0.30719 1.627899,-0.281403c0.165802,0.009979 0.347504,0.044891 0.513397,0.055878c0,0 -2.141815,0.227753 -2.141815,0.227753l0.000519,-0.002228zm-64.237091,303.436737c-2.0914,6.80304 -1.572327,14.64447 -2.0914,18.822144c-0.524719,4.182678 -1.5672,1.572327 -1.5672,13.067139c0,11.504822 -2.096405,35.023682 -4.706818,47.047668c-2.615387,12.023926 -2.615387,19.336121 -2.615387,27.182495c0,7.841309 -8.360413,41.816833 -8.360413,41.816833c0,0 -1.042603,15.163513 -1.042603,15.163513c0,0 -1.042694,5.225891 -1.042694,5.225891c0,0 -0.529205,-24.042908 -0.529205,-24.042908c0,0 -3.139679,-9.413574 -3.139679,-9.413574c0,0 -9.408508,-81.01825 -9.408508,-86.249207c0,-5.225891 -2.610382,-14.639343 -2.610382,-14.639343c0,0 2.091492,-6.798279 2.091492,-6.798279c0,0 1.566986,-26.134216 1.566986,-26.134216c0,0 2.610504,-12.023926 2.610504,-12.023926c0,0 3.139496,-29.797913 5.235992,-56.456421c2.086304,-26.663269 8.884399,-63.773438 8.884399,-63.773438c0,0 2.086304,-10.456726 2.086304,-10.456726c0,0 5.755005,18.29303 10.456696,71.614868c4.096924,46.407715 -2.393799,33.521912 2.091217,48.09082c2.091492,6.798157 4.182983,15.163513 2.091492,21.956665l-0.000793,0zm102.980103,-368.011597c0,0 -2.091492,-2.0914 -2.091492,-2.0914c0,0 0.524689,-0.524719 2.615387,-3.139465c2.0914,-2.615387 -2.615387,-3.653503 -3.139496,-6.269043c-0.524811,-2.615417 -9.92749,-32.932343 -9.92749,-32.932343c0,0 1.042694,-6.798157 -1.043915,-11.499878c-2.096313,-4.706818 -1.048187,-21.437546 -1.572205,-31.889328c-0.52478,-10.456726 -7.3172,-16.725693 -14.115295,-20.389297c-6.798187,-3.658707 -15.617096,-6.299225 -21.432587,-5.749954c-24.708008,2.36348 -23.599426,3.094177 -8.365204,-4.182739c0,0 1.048279,-8.365372 3.134277,-14.115295c2.096405,-5.749954 -0.518982,-3.129395 -2.086273,-9.408539c-1.5672,-6.273987 -0.524719,-6.273987 0.524689,-13.591263c1.042694,-7.322189 -0.524689,-10.456726 -3.139496,-13.596298c-2.610504,-3.124313 -3.134613,-1.038223 -3.134613,-10.44664c0,-9.408524 -4.701691,-19.8703 -9.408478,-43.913246c-4.706818,-24.047997 -31.370209,-50.187233 -37.115112,-53.840885c-5.755005,-3.658577 -13.596313,-4.706669 -19.341095,-4.706669c-5.755005,0 -10.980804,3.658581 -10.980804,3.658581c0,0 -7.836304,1.567188 -13.0672,2.09137c-5.225891,0.524712 -12.024109,8.365231 -18.298004,15.687538c-6.269012,7.312111 -14.634491,29.273792 -17.249908,45.475552c-2.610382,16.201492 -1.567291,21.956612 -5.749878,38.677231c-4.182709,16.735916 -7.8414,24.047882 -7.8414,24.047882c0,0 3.134583,12.548096 3.134583,12.548096c0,0 17.935211,10.965775 17.935211,10.965775c0,0 4.354004,6.536133 4.354004,6.536133c0,0 -14.518524,7.256699 -30.649628,10.204666c-14.992188,2.741562 -16.730804,6.803223 -20.908386,30.322113c-4.182587,23.523849 -6.278992,64.816605 -9.937592,95.138596c-3.653595,30.316925 18.822083,63.24942 21.961578,66.913025c1.960419,2.287933 7.286896,2.272797 10.995911,1.940125c1.713287,28.769897 2.4039,2.892578 -0.02301,28.376831c-1.042786,10.980896 -2.610382,23.523956 -2.610382,23.523956c0,0 -1.048401,8.365326 -1.048401,8.365326c0,0 -3.134521,9.927551 -5.225708,17.773895c-2.086395,7.841339 0,26.139374 0,26.139374c0,0 0.524689,26.139221 0.524689,31.88916c0,5.744934 0,14.105347 0,14.105347c0,0 4.701721,62.735352 8.360413,89.912842c3.663696,27.187439 5.230804,65.874939 5.230804,65.874939c0,0 -0.519104,4.177551 -0.519104,4.177551c0,0 1.042694,4.177673 1.042694,4.177673c0,0 -1.572174,5.230957 -1.572174,5.230957c0,0 0.529083,5.225769 0,9.413452c-0.519104,4.177673 -3.13443,17.773987 -3.13443,17.773987c0,0 1.572205,12.542969 0.524628,33.451355c-1.048218,20.913574 5.225891,60.639038 7.836395,77.364868c2.6203,16.730713 9.937592,50.187256 12.0289,63.773438c2.0914,13.596313 1.5672,9.413574 1.5672,9.413574c0,0 3.658691,2.615417 3.658691,2.615417c0,0 2.116516,11.283264 -0.135712,14.841064c-3.597992,5.659241 -17.103699,12.653931 -17.103699,12.653931c0,0 -1.562195,13.067078 -1.562195,13.067078c0,0 35.008606,-1.350586 41.80191,-1.884705c6.797974,-0.51355 14.7854,1.098755 22.621674,-10.401367c7.846405,-11.504944 4.565704,-18.867371 4.565704,-18.867371c0,0 -1.572388,-6.273987 -1.572388,-6.273987c0,0 1.048401,-3.658691 1.048401,-3.658691c0,0 3.658691,3.658691 3.658691,3.658691c0,0 2.318207,12.144775 9.92749,25.615051c6.798218,12.024109 13.072113,8.884521 13.072113,8.884521c0,0 10.457001,-1.042725 10.457001,-1.042725c0,0 3.653412,-3.134521 3.653412,-3.134521c3.2453,-10.184509 2.887573,-10.083862 9.937683,-22.999695c6.274109,-11.505066 0.519104,-9.937744 0.519104,-9.937744c0,0 9.937592,-4.701721 9.937592,-4.701721c0,0 11.494904,-51.754578 11.494904,-51.754578c0,0 2.096405,-22.475586 2.096405,-22.475586c0,0 3.653503,-31.365173 3.653503,-31.365173c0,0 3.139587,-17.249817 3.139587,-17.249817c0,0 1.562317,-25.620239 1.562317,-25.620239c0,0 5.230804,-25.086243 6.802979,-41.28772c1.5672,-16.211731 -1.572174,-15.163635 -2.091278,-22.999939c-0.524719,-7.846252 0,-8.89447 -2.0914,-23.009766c-2.091217,-14.115417 2.610504,-28.744812 2.610504,-28.744812c0,0 5.225677,-51.230286 5.225677,-51.230286c0,0 8.894714,-59.071838 14.120514,-77.893921c5.2258,-18.812012 1.562195,-22.99472 1.562195,-39.730621c0,-16.720612 0.529205,-20.908295 0.529205,-20.908295c0,0 -5.754791,-27.182526 -10.980804,-46.523712c-5.230988,-19.341125 -5.744904,-19.341125 -6.273895,-28.749634c-0.498901,-9.060852 0.916992,-17.083557 1.0224,-17.668152c7.191284,0.715302 16.231903,3.552734 16.231903,3.552734c0,0 4.177704,0 8.884491,-4.701752c4.701691,-4.706787 7.83609,-27.711609 8.884399,-33.975616c1.042694,-6.278931 1.572205,-21.966614 1.572205,-21.966614c0,0 2.0914,-3.13443 2.0914,-3.13443c0,0 -1.572205,-4.177765 -1.572205,-4.177765l-0.003082,-0.000458z"/>
</g>
</g>
</svg>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment