Как вывести viewbox на середину SVG?

Question

Указываю viewbox чтобы подсмотреть возможные дефекты на "неидеальном" стыке круга, но никак не могу сделать так, чтобы этот участок был на SVG крупным и по середине. Ведь я указываю viewbox с учетом одинаковых отступов от целевой точки как вправо-лево, так и верх-низ.

А в реальности изображение получаю прижатым к какому-либо краю. Все статьи почитал здесь по поводу viewport - viewbox, только про позиционирование вроде ничего и не нашел.

Нужно во всей красе увидеть участок "60 109.99999 60.00002 110.00001".

<svg xmlns="http://www.w3.org/2000/svg" viewbox="60 109.99999 60.00002 110.00001">
    <path d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black" fill="rgb(180,180,255)"/> 
</svg>

Что я делаю не так?

Answer 1

но никак не могу сделать так, чтобы этот участок был на SVG крупным и по середине.

Шаг 1. Узнаем физические размеры фигуры SVG

Если точнее сказать, то нужно узнать ширину и высоту ограничивающего фигуру svg прямоугольника и его координаты x,y от верхнего левого угла холста SVG.

Используем js метод getBBox()

<svg xmlns="http://www.w3.org/2000/svg" viewbox="60 109.99999 60.00002 110.00001">
    <path id="path" d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black" fill="rgb(180,180,255)"/> 
</svg>  
<script>
let bb = path.getBBox()
console.log(bb)
</script>

Шаг 2. Подставляем полученные цифры из консоли в параметры viewBox и для того, чтобы изображение не занимало всё окно браузера, добавляем viewport в заголовок SVG width="99.99" height="99.99"

<svg xmlns="http://www.w3.org/2000/svg" width="99.99" height="99.99" viewbox="10 10 99.99 99.99" style="border:1px solid red">
    <path id="path" d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black" stroke-width="0.1" fill="rgb(180,180,255)"/> 
</svg>  
<script>
let bb = path.getBBox()
console.log(bb)
</script>

Фигура SVG заняла симметрично всё пространство viewport (пользовательской области просмотра) и естественно стала расположена ровно по середине.

Шаг 3. Если есть необходимость увеличить изображение, допустим в 10 раз, то увеличиваем viewport в 10 раз width="999.9" height="999.9" при тех же значениях параметров viewBox

<svg xmlns="http://www.w3.org/2000/svg" width="999.9" height="999.9" viewbox="10 10 99.99 99.99" style="border:1px solid red">
    <path id="path" d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black"  fill="none"/> 
</svg>  
<script>
let bb = path.getBBox()
console.log(bb)
</script>

Обратите внимание на вывод в консоли, что физические размеры фигуры, остались прежними, изменился только размер отрисованной фигуры в пользовательском окне просмотра.

Шаг 4. При необходимости, чтобы рассмотреть полностью нижнюю границу фигуры можно поднять изображение с помощью изменения 2-го параметра viewBox

было: viewbox="10 10 99.99 99.99"
стало: viewbox="10 70 99.99 99.99"

<svg xmlns="http://www.w3.org/2000/svg" width="999.9" height="999.9" viewbox="10 70 99.99 99.99" style="border:1px solid red">
    <path id="path" d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black"  fill="none"/> 
</svg>

Для правой границы viewbox="70 10 99.99 99.99"

<svg xmlns="http://www.w3.org/2000/svg" width="999.9" height="999.9" viewbox="70 10 99.99 99.99" style="border:1px solid red">
    <path id="path" d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black"  fill="none"/> 
</svg>

Разрыв линии при разнице координат начала и конца намного меньше 1px увидеть не возможно. Так как минимальная единица в SVG 1px. Всё что меньше воспроизводится при рендеринге с эффектом Сгла́живание (англ. anti-aliasing) То есть вместо чётких границ разрыва, будут серые прямоугольники.

Answer 2

Проблема была здесь: viewbox="60 109.99999 60.00002 110.00001". Передаю вторыми параметрами 60.00002 и 110.00001, полагая, что это x2 и y2 соответственно, а должны быть указаны "width" и "height":

viewbox="60 109.99999 0.00002 0.00002"

Убираю "z" из пути, чтобы дуга не смыкалась и пробую повторить уже с правильным viewbox:

<svg xmlns="http://www.w3.org/2000/svg" viewbox="60 109.99999 0.00002 0.00002">
    <path d="M60 110 A 50 50 0 1 1 60.00001 110"
       stroke="black" fill="rgb(180,180,255)"/> 
</svg>

Видимо, масштаб маленький, но после недолгих манипуляций с шириной охвата viewbox, получаю таки видимый разрыв в кривой:

<svg xmlns="http://www.w3.org/2000/svg" viewbox="59.988 109.496 0.024 0.008">
<path d="M60 110 A 50 50 0 1 1 60.00001 110"
   stroke="black" fill="rgb(180,180,255)"/> 
</svg>

БЛОГ НА HUSL

Как вывести viewbox на середину SVG?

Ответы (2 шт):