Indagamos por distintos sitios y así brindarte la respuesta a tu problema, en caso de alguna inquietud déjanos la pregunta y responderemos porque estamos para ayudarte.
Solución:
Considerar transform-box:fill-box; entonces haz el origen bottom center y aumente un poco el viewbox para evitar el corte. También moví la rotación al polígono y mantuve la traducción en el g elemento.
$('#percent').on('change', function()
$('#triangle').css('transform', 'rotate(' + percentToDegrees($(this).val()) + 'deg)')
)
function percentToDegrees(percent)
var degrees = -90;
var inc = 1.8;
return degrees += (percent * inc);
#triangle
transform-origin:center bottom;
transform-box:fill-box;
input
display: block;
margin: 50px auto;
Lo más fácil es probablemente hacerlo todo con SVG, simplemente configurando el transform attribute en lugar de su css style.
Todo lo que necesita es establecer el segundo y tercer valor del rotate(angle, origin_x, origin_y) Método de transformación SVG.
$('#percent').on('input', function()
$('#needle').attr('transform', 'translate(175, 19) ' +
'rotate(' + percentToDegrees($(this).val()) + ', 10, 162)')
)
function percentToDegrees(percent)
var degrees = -90;
var inc = 1.8;
return degrees += (percent * inc);
input
display: block;
margin: 50px auto;
Incluso ganarás en la compatibilidad del navegador 😉
Y tenga en cuenta que todo esto podría simplificarse a:
$('#percent').on('input', function()
$('#Triangle')
.attr('transform', 'rotate(' + percentToDegrees($(this).val()) + ', 10, 162)')
)
function percentToDegrees(percent)
var degrees = -90;
var inc = 1.8;
return degrees += (percent * inc);
input
display: block;
margin: 50px auto;
#Page-1 text
font-family: Omnes-Regular, Omnes;
font-size: 15px;
font-weight: normal;
fill: #000;
Si haces scroll puedes encontrar las observaciones de otros sys admins, tú además tienes el poder dejar el tuyo si te gusta.