<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" class="box" viewBox="-200 -200 500 500">
<rect x="0" y="0" width="500" height="500" fill="#efefef" />
<rect class="item rotate css" x="0" y="0" width="20" height="60" fill="gray" opacity="0.5" tranform="translate(-10 -30)" />
<ellipse class="item" fill="#ff00af" cx="140" cy="50" rx="30" ry="20" />
<polygon class="item css rotate origin" fill="#ffa500" points="169 156 174 182 150 170 126 182 131 156 112 138 138 134 150 110 162 134 188 138"/>
<path class="item" stroke="#2bad7b" stroke-width="1" fill="none" d="M60 100 C100 60 100 140 140 100"/>
<text class="item" x="50" y="50" text-anchor="middle" font-size="3vw" alignment-baseline="middle">Drag</text>
<g id="group" class="-width css">
<g class="opacity width height css" transform="translate(150 150)">
<rect class="rotate scale css" x="-50" y="-50" width="100" height="100" fill="blue" />
</g>
<g class="opacity css" transform="translate(150 -150)">
<polygon class="css rotate" fill="red" points="0,-45 20,-15 50,-15 25,15 30,50 0,25 -30,50 -25,15 -50,-15 -20,-15"/>
</g>
<g class="opacity css" transform="translate(-50 150)">
<g class="width height css">
<path class="css rotate" d="M0,-50 C25,25, 75,75 0,50" fill="none" stroke="black" stroke-width="3" />
</g>
</g>
</g>
</svg>
<div id="trans" class="btn-group">
<button class="btn btn-sm btn-dark" role="button" aria-pressed="true">scale</button>
<button class="btn btn-sm btn-dark" role="button" aria-pressed="true">rotate</button>
<button class="btn btn-sm btn-dark" role="button" aria-pressed="true">width</button>
<button class="btn btn-sm btn-dark" role="button" aria-pressed="true">height</button>
</div>
<div id="selection" class="btn-group">
<button class="btn btn-sm btn-info select" role="button" aria-pressed="true">select/unselect</button>
</div>
<div id="effect" class="btn-group">
<button class="btn btn-sm btn-primary css" role="button" aria-pressed="true">css</button>
<button class="btn btn-sm btn-primary clean" role="button" aria-pressed="true">clean</button>
</div>
<div id="origin" class="btn-group">
<button class="btn btn-sm btn-light" role="button" aria-pressed="true">origin</button>
<button class="btn btn-sm btn-light" role="button" aria-pressed="true">origin10</button>
<button class="btn btn-sm btn-light" role="button" aria-pressed="true">origin20</button>
<button class="btn btn-sm btn-light" role="button" aria-pressed="true">origin30</button>
<button class="btn btn-sm btn-light" role="button" aria-pressed="true">origin40</button>
<button class="btn btn-sm btn-light" role="button" aria-pressed="true">origin-center</button>
<button class="btn btn-sm btn-light" role="button" aria-pressed="true">origin-end</button>
</div>
var svg = $('.box')[0];
var deg = 0;
var deg_step = 0.5;
var scale = 1;
var scale_step = 0.03;
var w = 100;
var w_step = 1;
var h = 100;
var h_step = 1;
setInterval(function(){
if( Math.abs(deg) > 360 ) deg = 0;
if( Math.abs(scale) > 2 ) scale_step *= -1;
if( Math.abs(w) > 150 ) w_step *= -1;
if( Math.abs(h) > 150 ) h_step *= -1;
deg += deg_step;
scale += scale_step;
w += w_step;
h += h_step;
$('.rotate, .scale, .width, .height').each(function(){
var css = [],
transform = [];
if( $(this).hasClass('rotate') ){
if( $(this).hasClass('rev') || $(this).hasClass('rev-rotate') ){
css.push(`rotate(${deg*-1}deg)`);
transform.push(`rotate(${deg*-1})`)
}else{
css.push(`rotate(${deg}deg)`);
transform.push(`rotate(${deg})`)
}
}
if( $(this).hasClass('scale') ) {
if( $(this).hasClass('rev') || $(this).hasClass('rev-scale') ){
css.push(`scale(${scale*-1})`);
transform.push(`scale(${scale*-1})`);
}else{
css.push(`scale(${scale})`);
transform.push(`scale(${scale})`);
}
}
if($(this).hasClass('width') && $(this).hasClass('height')){
css.push(`translate(${w}px, ${h}px)`);
transform.push(`translate(${w}, ${h})`);
} else if($(this).hasClass('width')){
css.push(`translate(${w}px, 0px)`);
transform.push(`translate(${w}, 0)`);
} else if($(this).hasClass('height')){
css.push(`translate(0px, ${h}px)`);
transform.push(`translate(0, ${h})`);
}
if(css.length && $(this).hasClass('css')) $(this).css({transform: css.join(' ')});
if(transform.length && $(this).hasClass('transform')) $(this).attr({transform: transform.join(' ')})
});
/* $('.rotate.transform').attr({transform: `rotate(${deg*-1}) scale(${scale})`});
$('.rotate.css').css({transform: `rotate(${deg}deg) scale(${scale})`}); */
}, 9);
$('#trans .btn').on('click', function(e){
$(this).toggleClass('active');
$(this).hasClass('active')?
$('.item.selected').addClass( $(this).text() ):
$('.item.selected').removeClass( $(this).text() );
});
$('#selection .btn').on('click', function(e){
$(this).toggleClass('active');
$('#trans .btn, #effect .btn, #origin .btn').removeClass('active');
if( $(this).hasClass('active') ){
$('.item').addClass('selected');
$(this).text('All select');
}else{
$('.item').removeClass('selected');
$(this).text('All unselect');
}
});
$('#effect .btn').on('click', function(e){
if($(this).hasClass('clean')) $('.item').removeClass('transform').removeClass('css');
else{
$(this).toggleClass('active');
if($(this).hasClass('active')){
$('.item.selected').removeAttr('tranfrom style').removeClass('transform').addClass('css')
$(this).text('css');
}else{
$('.item.selected').removeAttr('tranfrom style').removeClass('css').addClass('transform');
$(this).text('transform');
}
}
});
$('#origin .btn').on('click', function(e){
$('#origin .btn').removeClass('active');
$(this).addClass('active');
$('#origin .btn').each(function(){
$('.item.selected').removeClass($(this).text());
})
$('.item.selected').addClass($(this).text());
});
$('.item').on('click', function(e){
$(this).toggleClass('selected');
});
* {
padding: 0;
}
.box {
border: 1px solid black;
}
.static {
cursor: not-allowed;
opacity: 0.3;
}
.draggable {
cursor: move;
}
.item,
.opacity {
opacity: 0.3;
}
.item.selected {
opacity: 1;
}
.origin {
transform-origin: 0 0;
}
.origin10 {
transform-origin: 10% 10%;
}
.origin20 {
transform-origin: 20% 20%;
}
.origin30 {
transform-origin: 30% 30%;
}
.origin40 {
transform-origin: 40% 40%;
}
.origin-center {
transform-origin: center center;
}
.origin-end {
transform-origin: right bottom;
}