Когда я добавил max-width:Wpx, SVG в одиночных карточках перестали
заполнять контейнер: в карточке шириной 800px SVG ограничивался
своим intrinsic размером (например 320px для §6), и казался мелким.
Правильная responsive-стратегия — width:100% БЕЗ верхней границы.
viewBox + preserveAspectRatio сами правильно отмасштабируют содержимое.
Теперь в одиночных карточках SVG занимает всю ширину, в flex-сетке —
свою долю.
Cache-bust ?v=6.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Откатил неверный фикс: добавление width="W" height="H" атрибутов
заставило SVG рендериться в intrinsic-размере 180×160 px вместо
заполнения родительского контейнера. Из-за этого рисунки выглядели
маленькими.
Теперь svgBox использует правильную responsive-стратегию:
- viewBox="0 0 W H" — определяет систему координат
- preserveAspectRatio="xMidYMid meet" — сохраняет пропорции
- style="width:100%; max-width:Wpx; height:auto" — растягивает
до ширины контейнера, но не больше intrinsic W; height auto
держит правильное соотношение сторон через viewBox
Cache-bust ?v=5.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Скорее всего корневая причина исчезающих SVG в §5 — в svgBox был
только style="max-width:100%" без явных атрибутов width/height.
В flex-контейнере с inline-block детьми SVG без явных размеров
может сжаться до 0×0 в некоторых браузерах (особенно при не-100%
ширине контейнера).
Фикс:
1. svgBox: добавлены width="W" и height="H" атрибуты на <svg>,
плюс height:auto в стиле — теперь SVG имеет гарантированно
ненулевой размер и сохраняет пропорции при сжатии.
2. svgNotation в §5: если G не загружен, теперь показывается
красный fallback-блок "⚠ Библиотека SVG не загружена.
Обновите страницу с Ctrl+Shift+R" — пользователь сразу видит,
что проблема в кэше.
3. Bump cache-bust до ?v=4 для geom7_svg.js — форсит
обязательное обновление файла в браузерах, которые
проигнорировали ?v=3.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Скорее всего у пользователя был закэширован старый geom7_svg.js, из-за
чего часть API изменилась и SVG-блоки в §5 рендерились пустыми
(angleViz и notationVariant возвращали '' если G не было).
Что сделано:
1. Везде src="/js/geom7_svg.js?v=3" — форсит браузер скачать заново
- geometry_7_ch1.html
- geometry_7_ch2.html
2. notationVariant: function declaration внутри if(G) заменён на
const arrow expression — для надёжности в strict mode + блоке
3. Добавлен 3-й SVG в §5 — карточка 5.2 «Измерение углов»:
- полукруглый транспортир радиусом 90px с делениями каждые 10°
- три цветных луча, отложенные на 40°, 90°, 140° от одной стороны
- цветные подписи градусных мер в правильных местах
Теперь в §5 ТРИ SVG-рисунка:
- 5.1 «Что такое угол» — три обозначения одного угла
- 5.2 «Измерение углов» — транспортир с 3 примерами (НОВОЕ)
- 5.3 «Виды углов» — 4 типа углов с заливкой
- 5.4 «Биссектриса» — деление угла пополам
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Корневая причина проблемы с наложенными метками углов в §6:
В G.angle формула центра метки была:
midA = (a1 + a2) / 2 + (|delta| > π ? π : 0)
При a1≈-153° и a2≈+153° (как у ∠2 в §6) среднее даёт 0° —
ровно туда же, куда ставится метка ∠1 (a1≈+25°, a2≈-25°,
тоже среднее = 0°). Результат: обе метки в одной точке.
Правильная формула — идти от a1 на половину delta в направлении
sweep:
midA = a1 + delta / 2
Это автоматически разносит метки противоположных секторов
в противоположные стороны. ∠1 уходит вправо, ∠2 — влево.
Также добавил 2 новых SVG в §5:
1. Карточка 5.1 «Что такое угол» — теперь содержит три варианта
обозначения одного и того же угла: ∠BAC (полное), ∠A (короткое),
α (греческая буква). Каждый — отдельный SVG с подсветкой угла
жёлтым сектором, общая подпись внизу.
2. Карточка 5.4 «Биссектриса» — наглядный SVG: ∠BAC = 70°,
биссектриса AD (пунктирная красная) делит его на две равные
половинки по 35°. Полупрозрачная заливка зелёным/фиолетовым
для каждой половины, дуги с одинаковыми штрихами как маркер
равных углов.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
§6 (вертикальные углы):
- SVG расширен 260×180 → 320×230
- Добавлены 4 полупрозрачных сектора как фон (красный для ∠1/∠2,
оранжевый для ∠3/∠4) — сразу видно, какие углы вертикальны
- Метки ∠1, ∠2, ∠3, ∠4 теперь явные (со знаком "∠")
- Подпись O вынесена в (-26,-22) от вершины + пунктирная линия-указатель
к самой точке — чтобы метка не перекрывала ∠1
- Чётко разнесены: ∠1, ∠2 (red, r=20) — на горизонтали;
∠3, ∠4 (orange, r=32) — на вертикали
§5 (виды углов):
- SVG расширен 140×120 → 180×150 (больше деталей)
- Каждый угол теперь имеет полупрозрачную заливку-сектор
(цветом, соответствующим типу угла)
- Подпись типа угла увеличена до 12px, чётко читается
- Развёрнутый угол: полукруг закрашен, подпись 180° явная
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Maxim Dolgolyov