, Ваше решение является надежным и снова работает в этой ситуации. Спасибо!
я используюviewBox атрибут для «увеличения» SVG-элемента. Увеличение достигается, конечно, с помощью нижнегоширина а такжевысота значения дляviewBox атрибут - ноx а такжеy Значения сложно найти для центрирования сцены.
Ниже приведен фрагмент, гдеviewBox="0 0 100 100". (x y ширина высота) Это моя отправная точка. Сцена в масштабе и начинается в верхнем левом углу.
<head>
<link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>
<body>
<iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"
id="grid"
></iframe>
<div class="wrp">
<!-- SVG relevant code below-->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
width="100" height="100"
class="canvas"
>
<defs>
<style type="text/css">
circle {
fill: #0ff;
fill-opacity: 0.25;
stroke-width: 0.25;
stroke: #0ee;
}
</style>
</defs>
<circle cx="37.5" cy="50" r="25" />
<circle cx="62.5" cy="50" r="25" />
<circle cx="50" cy="71.65" r="25" />
</svg>
</div>
</body>(Просмотр на полной странице. Фрагменты отзывчивы)
УвеличениеИзменениеширина а такжевысота значения для50 вviewBox масштабирует сцену Однако я должен был настроитьx а такжеy значения как до половиныviewBox размеры:25 держать рисунок в центре.
viewBox="25 25 50 50"
<head>
<link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>
<body>
<iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"
id="grid"
></iframe>
<div class="wrp">
<!-- SVG relevant code below-->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="25 25 50 50"
width="100" height="100"
class="canvas"
>
<defs>
<style type="text/css">
circle {
fill: #0ff;
fill-opacity: 0.25;
stroke-width: 0.25;
stroke: #0ee;
}
</style>
</defs>
<circle cx="37.5" cy="50" r="25" />
<circle cx="62.5" cy="50" r="25" />
<circle cx="50" cy="71.65" r="25" />
</svg>
</div>
</body>Следуя схеме деления пополамширина а такжевысота центрировать сцену:
viewBox="12.5 12.5 25 25" следует продолжать масштабирование и оставаться в центре. Но это не остается в центре. Мой вопрос в том, какую формулу или технику использует SVG, и я всегда могу математически выяснить, чтоx а такжеy значение мне нужно центрировать конкретныйширина а такжевысота значение вviewBox?
Примечание. Мне известны такие библиотеки, какSnap.svg а такжеРафаель, Я избегаю библиотек, чтобы понять основы.
Еще одна вещь: я спрашиваю, есть ли у вас ужеширина а такжевысота значение вviewBox как вы находите центральные координаты сцены. Не наоборот.
Внешние таблицы стилей были включены для визуального познания. Единственный соответствующий код для этого вопроса относится к элементам SVG.