Подскажите пожалуйста, как прописать формулу(или указать параметры), для правильного масштабирования элементов SVG. Приведу пример
window.onload = function() {
var $allFigures = $('#figures'),
$figure = $('.figure'),
$circle = $('circle'),
$rect = $('rect'),
$polygon = $('polygon'),
attrBox = $allFigures.attr('viewBox'),
initialWidth,
initialHeight,
initialX,
initialY;
console.log($figure.length + " = $figure count")
$circle.click(function() {
var R = $(this).attr("r");
$(this).attr({
"r": R * 2
});
})
$rect.click(function() {
initialX = $(this).attr("x");
initialY = $(this).attr("y");
initialWidth = $(this).attr("width");
initialHeight = $(this).attr("height");
$(this).attr({
"x": initialX / 2,
"y": initialY / 2,
"width": initialWidth * 2,
"height": initialHeight * 2
});
})
$figure.on("click", $figure, function() {
$(this).css({
"fill": "#0f0"
});
})
}
/*.figure:hover{
transform: scale(1.2);
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="figures" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve">
<rect x="386" y="138.5" class="figure" fill="#A21E22" stroke="#000" stroke-miterlimit="10" width="185" height="123"/>
<circle class="figure" fill="#4CA146" stroke="#000" stroke-miterlimit="10" cx="118" cy="200" r="48"/>
<polygon class="figure" fill="#FEE33A" stroke="#000" stroke-miterlimit="10" points="287,123.2 304.3,176.3 360.1,176.3 314.9,209.1 332.2,262.2 287,229.3 241.8,262.2
259.1,209.1 213.9,176.3 269.7,176.3 "/>
</svg>
Как произвести постепенное масштабирование полигонального объекта SVG
? Из-за того что в SVG есть область видимости viewBox
, я так понимаю, что единственный способ здесь пересчитывать точки нахождения points
для объекта? Или есть ещё какой-нибудь метод равномерного масштабирования объекта?