- В этой теме 22 ответа, 3 участника, последнее обновление 1 год, 2 месяца назад сделано
.
-
Сообщения
-
Пример SVG, который не работает в WEB сервере RapidScada. Начиная на уровне вставки в редакторе. Если не ошибаюсь вставка идет растром?
Хотелось бы, чтобы оно заработало в новом редакторе и далее в web.
Для проверки.<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none"> <rect x="4" y="4" width="calc(100% - 6px)" height="calc(100% - 6px)" style="stroke: #000; stroke-width: 5px; fill: #f00;" rx="10" ry="10" /> <svg viewbox="0 0 64 64" x="calc(50% - 32px)" y="calc(50% - 32px)" > <g id="cir" > <circle cx="32" cy="32" r="29" fill="#fff" stroke="#000" stroke-width="5px" /> <line x1="32" y1="32" x2="32" y2="11" stroke="#000" stroke-width="7" /> <line x1="32" y1="32" x2="11" y2="32" stroke="#000" stroke-width="7" /> <line x1="32" y1="32" x2="32" y2="50" stroke="#000" stroke-width="7" /> <line x1="32" y1="32" x2="50" y2="32" stroke="#000" stroke-width="7" /> </g> </svg> </svg><?xml version="1.0"?> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" preserveAspectRatio="none"> <g class="layer"> <title>Image</title> <rect fill="#f00" height="calc(100% - 6px)" id="svg_3" rx="10" ry="10" stroke="#000" stroke-width="5px" width="calc(100% - 6px)" x="4" y="4"/> <g id="svg_01"> <svg id="svg_02" x="calc(50% - 32px)" y="calc(50% - 32px)"> <g id="svg_03"> <circle cx="32" cy="32" fill="#fff" id="svg_16" r="29" stroke="#000" stroke-width="5px"/> <line id="svg_04" stroke="#000" stroke-width="7" x1="32" x2="32" y1="32" y2="11"/> <line id="svg_05" stroke="#000" stroke-width="7" x1="32" x2="11" y1="32" y2="32"/> <line id="svg_06" stroke="#000" stroke-width="7" x1="32" x2="32" y1="32" y2="50"/> <line id="svg_07" stroke="#000" stroke-width="7" x1="32" x2="50" y1="32" y2="32"/> </g> </svg> </g> </g> </svg>А так?
Так работает некорректно.
Слева ваш вариант, в центре то, что не работает (нет рамки с заливкой)
Справа чуть другой вариант, но он чуть-чуть неправильно работает, в принципе работает, но не нравится.http://176.109.111.174:10008/View/6
стандартный гость
Неправильно. Там ширина и высота подгоняется в %, не 100, а меньше, чтобы не подрезали толщину пера.
Калькуляция от 100% минус пикеели, позволяет сделать так, чтобы толщина пера не обрезалась.
Тогда не важен размер, на который растянули. И вложенный svg всегда в центре без искажений окружности и линий.Такое ощущение, что svg.dll умеет рассчитывать координаты только для viewbox, а остальное не умеет. Либо числа, либо % и все.
В общем суть проблемы если я правильно понял, Редактор или svg.dll игнорирует calc, который уже относится к CSS а не к SVG.
При этом при открытии в web браузерах все работает, а в Редакторе нет.Интересно, можно как-то поправить этот момент в текущей версии? например чтобы Редактор вставил картинку на мнемосхему в обход svg.dll
Или может есть вариант вставлять svg картинки в мнемосхему *.sch как-то иначе руками? пусть его не будет понимать просмотрщик редактора, но web будет его отображать как и задумано?
Еще раз, svg отображается разными браузерами. Атом, Хром, Опера, IE, Edge аж бегом.
Но стоит его вставить в Редакторе, он ломается сразу же.
то есть проблема либо svg.dll через которую идет просмотр или вставка Редактором.width="100%" height="100%"и последующие cal() в rect или line рушат все.
проблемы с браузерами нет.А вот использование calc() во viewbox для вставки внутрь другого svg не ломает.
сам по себе rect и line в svg не имеет возможности использования calc() кстати. Если там просто задать в % но менее 100 проблем не вызывает. Просто отображать будет немного криво то, что задумано. В некотором роде костыль.
Нашел путь обхода. Если получится. покажу как доделаю. Рамка прямо супер получается, прямо по границам изображения. И не надо лепить кучу рамок под разные размеры, чтобы края при этом оставались скругленные одинаково и не увеличивались при растяжении.
http://176.109.111.174:10008/View/6 — 4 и 5 элементы растягиваются на полный размер вставленной картинки. Окружность с + можно перемещать при необходимости настройками. то есть вставлять дополнительный svg и редактировать его положение относительно какого-то края (у меня по центру).
причем забавно, там используется при вставке все та же функция calc(% — px) но при этом Редактор это не уничтожает. Хотя calc вроде относится к CSS.
Но стоит использовать calc в координатах фигуры (rect, line и вероятно других) то убьет мгновенно…з.ы. в общем хотелось бы для нового редактора какую штуку. Ну или поправить этот момент, если это возможно с превью. Либо возможность вставлять чистый код svg в <Image> файла мнемосхемы и ссылаться на него так же как к другим картинкам.
Если еще получится привязываться к свойствам для управления было бы вообще супер.
НО. мне @Romiros тут показывал вариант, но он очень кривоватый. Типа заменять свойства тегами.Что-то типа такого <text style="fill: {main}; font-family: fantasy, sans-serif; font-size: 100%; font-weight: 400; white-space: pre; text-anchor: middle; cursor:pointer" x="56.047" y="57.32">{value}</text>тут {main}, {value} теги вместо правильных параметров. После такого любой svg убьется и не будет открываться правильно в других средствах.
Подобные вещи надо делать на лету. Например тем вещам, которые можно редактировать указывать дополнительные атрибуты, они не мешают работе svg (проверено)
Например добавить атрибут для text style fill — enableFill = true.
Значит можно менять, не будет атрибута, значит менять это свойство нельзя.
- Для ответа в этой теме необходимо авторизоваться.