- В этой теме 30 ответов, 2 участника, последнее обновление 2 недели, 5 дней назад сделано
.
-
Сообщения
-
Рассказывайте, как найти компонент svg по определенному id ?
Например есть строка
<rect id="liquid"— уровень вложенности в svg неизвестен, может быть во вложенном svg в svg, может быть вложен в группу g внутри svg.в SunShining как-то все примитивно
_showShining(args) { args.component.dom.find("svg path") .attr("fill", this._getShining(args) ? "cyan" : "lightcyan");в итоге я найду кучу path, потому что у меня их будет много.
Попробуйте
args.component.dom.find("#liquid")
Не уверен, что SVG, в котором используются id, будет корректно себя вести на схеме, если он применяется для нескольких компонентов. Обычно считается, что id уникален в рамках веб-страницы. Может быть, для SVG есть исключение. Поищите в этом направлении.
Вместо id лучше использовать class, если это поддерживается в SVG.Ну по идее svg завернут в тег <svg> и все id получаются нужны уникальные только в рамках одного тега. Со вложенными не проверял, но тоже должно изолироваться по идее.
Есть в нете примеры, когда один и тот же svg вкладывают один в другой, не помню, чтобы там что-то меняли.
class определяет имя стиля, но не «имя» компонента внутри svg.
А обращение, например для use идет именно по id<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #f0f0f0; } #tank { width: 300px; height: auto; } </style> </head> <body> <svg id="tank" version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 766" width="448" height="766"> <defs> <!-- ClipPath для заливки --> <clipPath id="tankClip"> <path d="m0.72 65.92l0.24-3.6 0.72-3.84 1.2-3.36 1.68-3.36 2.16-3.12 2.4-2.88 2.88-2.4 3.12-2.16 3.36-1.68 3.6-1.2 21.36-7.68 22.08-6.96 22.08-6 22.32-5.04 22.56-4.08 22.56-3.36 22.8-2.16 22.8-1.44 23.04-0.48 22.8 0.48 23.04 1.44 22.8 2.16 22.56 3.36 22.56 4.08 22.32 5.04 22.08 6 21.84 6.96 21.6 7.68 3.6 1.2 3.36 1.68 3.12 2.16 2.64 2.4 2.64 2.88 1.92 3.12 1.68 3.36 1.2 3.36 0.72 3.84 0.48 3.6v632.17l-0.48 3.84-0.72 3.6-1.2 3.6-1.68 3.36-1.92 3.12-2.64 2.64-2.64 2.64-3.12 1.92-3.36 1.68-3.6 1.2-21.6 7.92-21.84 6.72-22.08 6-22.32 5.04-22.56 4.32-22.56 3.12-22.8 2.4-23.04 1.44-22.8 0.24-23.04-0.24-22.8-1.44-22.8-2.4-22.56-3.12-22.56-4.32-22.32-5.04-22.08-6-22.08-6.72-21.36-7.92-3.6-1.2-3.36-1.68-3.12-1.92-2.88-2.64-2.4-2.64-2.16-3.12-1.68-3.36-1.2-3.6-0.72-3.6-0.24-3.84z"/> </clipPath> </defs> <style> .s0 { fill: none; stroke: #ff0000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; } </style> <!-- Заливка уровня --> <rect id="liquid" fill="#2196F3" width="448" height="0" y="766" clip-path="url(#tankClip)" /> <!-- Твой контур --> <path id="Path 1" fill-rule="evenodd" class="s0" d="m0.72 65.92l0.24-3.6 0.72-3.84 1.2-3.36 1.68-3.36 2.16-3.12 2.4-2.88 2.88-2.4 3.12-2.16 3.36-1.68 3.6-1.2 21.36-7.68 22.08-6.96 22.08-6 22.32-5.04 22.56-4.08 22.56-3.36 22.8-2.16 22.8-1.44 23.04-0.48 22.8 0.48 23.04 1.44 22.8 2.16 22.56 3.36 22.56 4.08 22.32 5.04 22.08 6 21.84 6.96 21.6 7.68 3.6 1.2 3.36 1.68 3.12 2.16 2.64 2.4 2.64 2.88 1.92 3.12 1.68 3.36 1.2 3.36 0.72 3.84 0.48 3.6v632.17l-0.48 3.84-0.72 3.6-1.2 3.6-1.68 3.36-1.92 3.12-2.64 2.64-2.64 2.64-3.12 1.92-3.36 1.68-3.6 1.2-21.6 7.92-21.84 6.72-22.08 6-22.32 5.04-22.56 4.32-22.56 3.12-22.8 2.4-23.04 1.44-22.8 0.24-23.04-0.24-22.8-1.44-22.8-2.4-22.56-3.12-22.56-4.32-22.32-5.04-22.08-6-22.08-6.72-21.36-7.92-3.6-1.2-3.36-1.68-3.12-1.92-2.88-2.64-2.4-2.64-2.16-3.12-1.68-3.36-1.2-3.6-0.72-3.6-0.24-3.84z"/> </svg> <script> const levelPercent = 80; // ← МЕНЯЙ от 0 до 100 // === Рассчитываем уровень === // Самая нижняя точка: Y = 766 (конец viewBox) // Самая верхняя точка: Y = 0 (начало viewBox) const minY = 0; const maxY = 766; const totalHeight = maxY - minY; // При levelPercent = 0 -> y = maxY = 766 (ничего не заполнено) // При levelPercent = 100 -> y = minY = 0 (полный) const liquidHeight = (levelPercent / 100) * totalHeight; const y = maxY - liquidHeight; // Применяем const liquidRect = document.getElementById('liquid'); liquidRect.setAttribute('y', y); liquidRect.setAttribute('height', liquidHeight); </script> </body> </html>Примитивный код, добытый за два дня мучения ИИ 🙂
Теперь объясните дураку, сколько еще должен потратить дней на ИИ, чтобы добавить аналог изменений в скрипте для Mimic? — код, работающий в html (меняю одно значение и вижу разницу) чтобы заставить работать в Mimic ?можно хоть один пример с комментариями для вот совсем тупых ?
Я вижу по коду, что меняя одну переменную, тут меняется две переменных — y и heightя даже не могу посмотреть, меняет ли какой-либо код хоть что-то, потому что в редакторе отключены скрипты, какой-то адекватной отладки нет совсем.
Интересно, что будет происходить, если в экземплярах будут const ?
Они тоже окажутся в общей куче страницы и перемещаются между экземплярами?var, let и const
Как будут себя вести в экземплярах компонентов, особенно интересует в части faceplate, внутри которого могут быть два и более одинаковых экземпляра компонента ?
Возможно ли применение экземпляров faceplate в другом faceplate?
Поведение скриптов при этом ?
> Возможно ли применение экземпляров faceplate в другом faceplate?
Да. Скрипт относится к конкретному компоненту.> var, let и const
var не рекомендую использовать.
let и const, если они объявлены локально в методах, будут нормально работать.Создавайте новый фейсплейт по аналогии с SunComponent.fp, используя свой SVG, и пишите, как всё это будет работать при попытке изменить SVG из скрипта.
У меня вообще нет понимания, как этот скрипт внедрить. В HTML он работает, я меняю одну переменную, так понимаю именно ее надо связать каким то образом.
И если я меняю в html и открываю снова, я вижу как меняется уровень.
Но все мои попытки сделать по аналогии с SunComponent ни к чему не приводят.Или вообще получаю сообщение об ошибке веб страницы, так как использовал из скрипта поиск по ID
Вот можете сделать пример faceplate, используя svg и скрипт выше?
С некоторыми пояснениями, что за чем и почему?В топку этот Mimic с его скриптами, завернутыми непонятно куда и во что? 🙁
const либо не видит, либо не принимает, куда бы я этот кусок кода не писал.
Все, что работает в html тут не работает никак.в общем до будущих времен, когда появится хоть какая-то адекватная документация, как адаптировать скрипты для работы в этом ….. Mimic 🙂
Вот можете сделать пример faceplate, используя svg и скрипт выше?
Нет, но я могу ответить на Ваши конкретные вопросы, которые возникают в процессе разработки. Вопрос «как сделать» не относится к конкретным вопросам. Пример вопроса, на который я могу ответить: «что делается в таком-то примере, в такой-то строчке скрипта».
Новый движок мнемосхем опубликован в экспериментальном режиме. Не стоит ждать полной документации и множества примеров, пока он не готов. Готов — это когда старый редактор схем удалён из дистрибутива.
ваш вариант find не работает.
Попытки всунуть в разных вариантах const не работают.В консоли ошибки выдаются в стиле «ой, я не знаю const»
Или если const с именами в другом месте, то ошибка «ой, я не знаю такое имя» и на этом обработка заканчивается. Если закопентировать эту строку, будет ошибка со следующим именем переменной.
И так далее.Я же и говорю, с остальным будем ждать дальше. Или ждать редактора от «конкурента» 🙂
Вот было бы неплохо пример хотя бы на коде выше с применением const и связями с пояснениями, чтобы разбираться дальше. Может я их просто не туда или не так сую?
- Для ответа в этой теме необходимо авторизоваться.