Центрирование на определенных точках при масштабировании с использованием SVG viewBox
Помимо всего остального кода, этот вопрос касается только SVG viewBox атрибут в конце строки 8: viewBox="0 0 100 100,
Вопрос заключается в следующем: какую формулу я могу использовать, чтобы выбрать произвольную точку и увеличить ее конкретно, сохраняя центр обзора по центру.
Например, если я изменю код на viewBox="0 0 50 50" SVG будет увеличивать на 50%, но он будет застревать по центру 0, 0 - это точка, которая будет центрирована. Я могу поиграть с числами и найти центральные точки с течением времени, но мой вопрос в том, какую формулу я могу использовать, чтобы держать ее в центре уникальной точки?
Scenerio: Если я знаю, я хочу увеличить масштаб, чтобы удвоить размер и установить viewBox размеры до 50 50 Как я могу найти правильные координаты X и Y на viewBox держать SVG в центре на произвольной точке, такой как ( 70, 74 )?
Как мне сохранить viewBox сосредоточено на точке ( 70,74 ) когда зум установлен на 50 50,
viewBox( ? ? 50 50 ) - Центр по ( 70, 74 ), Как найти пропущенные значения X и Y?
circle {
animation-name: pulse;
animation-duration: 4s;
animation-delay: 0;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: 50% 50%;
}
circle + circle {
transform: scale( 0.25 );
animation-duration: 8s;
}
@keyframes pulse {
100% {
transform: scale( 2 );
opacity: 0;
}
}<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://codepen.io/basement/pen/qXMRxX.css">
</head>
<body>
<div class="wrp">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
width="100" height="100"
class="canvas"
> <!-- How do I zoom 200% and keep viewBox centered on point ( 70, 74 )? -->
<script xlink:href="https://codepen.io/basement/pen/qXMRxX.js"></script>
<circle cx="70" cy="74" r="0.5" fill="#f46" />
<circle cx="70" cy="74" r="0.5" fill="#f46" />
</svg>
</div>
</body>Обратите внимание, как это: Как сохранить viewBox по центру при "масштабировании" в SVG? Вопрос заключается в том, чтобы держать viewBox по центру только в центральной точке SVG. Этот текущий вопрос о том, как сохранить его в центре определенной произвольной точки, отличной от центральной точки чертежа.
Примечание. На самом деле я не использую какие-либо библиотеки в попытке понять основную математику, лежащую в основе этого, для будущих проектов. Спасибо.
РЕДАКТИРОВАТЬ: формула, представленная в связанном вопросе: centre - newWidth/2 , Но это не похоже на работу здесь. точка ( 70, 74 ) является центром в этом случае. Так что для значения Х это 70 - newWidth/2 Поскольку мы увеличиваем в 2 раза, мы знаем, что новая ширина 50 (половина из 100). Так 50/2 = 25 , 70-25 = 45 для X и 74-25 = 49 для Ю. Но viewBox="45 49 50 50" Не в центре. точка ( 70, 74 ) находится ниже центра и слишком далеко вправо относительно viewBox , JSFiddle: http://jsfiddle.net/dndvzj8f/2/. Что я делаю неправильно? Похоже, решение связанного ответа здесь не работает.