<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Stacking Transforms with SVG</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form id="transforms">
<p style="text-align:left">Try stacking transforms by clicking "apply transform" and then add another.</p>
<select id="transforms-select">
<option data-transform="translate">translate (x [y])</option>
<option data-transform="scale">scale (x [y])</option>
<option data-transform="rotate">rotate (a [x y])</option>
<option data-transform="skewX">skewX (a)</option>
<option data-transform="skewY">skewY (a)</option>
<!--
<option data-transform="matrix">matrix</option>
-->
</select>
<br><br>
<div class="translate-field" data-transform="translate">
x: <input type=range min=-500 max=500 value=0>
y: <input type=range min=-500 max=500 value=0>
</div>
<div class="translate-field" data-transform="scale">
x: <input type=range min=-5.0 max=5.0 value=1.0 step="0.1">
y: <input type=range min=-5.0 max=5.0 value=1.0 step="0.1">
</div>
<div class="translate-field" data-transform="skewX">
a: <input type=range min=-100 max=100 value=1>
</div>
<div class="translate-field" data-transform="skewY">
a: <input type=range min=-100 max=100 value=1>
</div>
<div class="translate-field" data-transform="rotate">
a: <input type=range min=-360 max=360 value=0>
x: <input type=range min=-500 max=1000 value=500>
y: <input type=range min=-500 max=1000 value=500>
</div>
<br>
<button>apply transform</button>
<br><br>
<div id="results">result: </div>
</form>
<svg xmlns="http://www.w3.org/2000/svg">
<title>HTML5 Logo</title>
<g id="apply-transforms">
<polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512 "/>
<polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894 "/>
<polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
<polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
<path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
<path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
<path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
<path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
<polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
<polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
</g>
</svg>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/1Marc/stacking-transforms-with-svg-DCvFm */
svg {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index: -1;
width: 100%;
height: 100%;
}
form {
position: absolute;
right: 10%;
top: 10%;
z-index: 9999999;
text-align: right;
background: rgba(255, 255, 255, 0.7);
border: 3px solid #ddd;
padding: 0 20px 20px;
width: 50%;
min-width: 500px;
}
form,
form select,
form input {
font-size: 18px;
}
/*Downloaded from https://www.codeseek.co/1Marc/stacking-transforms-with-svg-DCvFm */
var $fields = $('.translate-field').hide(),
$results = $("#results"),
$applyTransforms = $("#apply-transforms"),
selectedTransform,
transforms = [],
result = '';
$fields.first().show();
selectedTransform = $fields.first().data('transform');
$("#transforms-select").on("change", function(){
$fields.hide();
selectedTransform = $(this).find(":selected").data('transform');
$('.translate-field[data-transform="' + selectedTransform + '"]').show();
});
$(".translate-field").on("change", function(){
var copyTransforms = transforms.slice(0);
copyTransforms.push( getNewTransform() );
renderTransforms(copyTransforms);
});
$("#transforms").on("submit", function(e){
transforms.push( getNewTransform() );
renderTransforms(transforms);
return false;
});
function getNewTransform() {
var transformVal = $.map($('input:visible'), function(input){
return $(input).val();
}).join(' ');
return selectedTransform + '(' + transformVal + ')';
}
function renderTransforms(t) {
$applyTransforms.attr('transform', t.join(' '));
$results.text('result: ' + t.join(' '));
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Normalize
jQuery
v2.1.3
