Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
6 / 5 / 3
Регистрация: 16.01.2016
Сообщений: 255

Svg добавить path

01.01.2019, 19:16. Показов 2340. Ответов 0

Студворк — интернет-сервис помощи студентам
На странице есть растянутое во всю ширину и высоту svg
HTML5
1
2
3
4
5
6
7
<svg id="Arrows" width="100%" height="100%">
  <defs>
    <marker id="arrowhead" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z"></path>
    </marker>
  </defs>
</svg>

Хочу на нем нарисовать между элементами коннектор
Делаю это таким скриптом
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var drawConnector = function(A, B) {
  var posnALeft = {
    x: A.offsetLeft - 8,
    y: A.offsetTop  + A.offsetHeight / 2
  };
  var posnARight = {
    x: A.offsetLeft + A.offsetWidth + 8,
    y: A.offsetTop  + A.offsetHeight / 2    
  };
  var posnBLeft = {
    x: B.offsetLeft - 8,
    y: B.offsetTop  + A.offsetHeight / 2
  };
  var posnBRight = {
    x: B.offsetLeft + B.offsetWidth + 8,
    y: B.offsetTop  + A.offsetHeight / 2
  };
  var dStr =
      "M" +
      (posnARight.x      ) + "," + (posnARight.y) + " " +
      "C" +
      (posnARight.x + 100) + "," + (posnARight.y) + " " +
      (posnBLeft.x - 100) + "," + (posnBLeft.y) + " " +
      (posnBLeft.x      ) + "," + (posnBLeft.y);
  var id = A.getAttribute('id') + "to" + B.getAttribute('id');
  if (!document.getElementById(id)){
    var path = document.createElement("path");
    path.setAttribute("id", id);
    path.setAttribute("fill","none");
    path.setAttribute("stroke","black");
    path.setAttribute("maker-end","url(#arrowhead)");
    path = document.getElementById("Arrows").appendChild(path);
  }
  document.getElementById(id).setAttribute("d", dStr);
   document.getElementById(id).innerHTML="ww";
};
Но добавленный path не отображается

Только когда в браузере удаляю его и вставляю через "Edit as HTML" он отображается, и то без стрелочки


Что я делаю не так и что надо делать, чтобы все отображалось?

Добавлено через 26 минут
То есть, все отображается нормально, если меняю HTML вручную
А скриптом ничего не отображается, хотя в код добавляется

Добавлено через 54 минуты
Работает, если сделать
HTML5
1
<svg id="Arrows" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
JavaScript
1
path = document.createElementNS("http://www.w3.org/2000/svg","path");//В функции создания path
Но тогда отображается без стрелочки
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
01.01.2019, 19:16
Ответы с готовыми решениями:

Тег svg, path
&lt;body&gt; &lt;div class=&quot;bloka&quot;&gt; &lt;ul class=&quot;main_menu&quot;&gt; &lt;li&gt;&lt;a href=&quot;firstpage.html&quot;&gt;Первая страница&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; ...

Polygon и path (Svg паттерны)
Всем здоровья! В чем разница между path и polygon? Какой из них лучше всего применять в Svg паттернах. Пример:...

Реализация Svg Path средствами CSS
Возможно ли описать, к примеру, такого вида линию в классе CSS? .type { ... } &lt;svg&gt; ... &lt;path...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
01.01.2019, 19:16
Помогаю со студенческими работами здесь

Есть svg иконка, как узнать её path?
В интернете чаще всего работа с svg описана через тэг path. Рисую иконку в coreldrow. Как мне узнать её paht ? Перечитала множество статей...

Теги SVG и path. Для чего и что за теги?
Добрый день! Наткнулся на тег SVG , а потом и path. Ищу по ним информацию, но так, чтобы доступно и детально. Может кто-то вкратце...

Как распарсить svg path и по нему нарисовать во View кривую
Нужно написать приложение которое на входе принимает svg path, к примеру...

Сокращение пути к файлу, x:\path\path\...\path
Помогите с решением такой задачи, желательно до четверга)): Строка длиной не более 1000 символов содержит полный путь к файлу в формате...

Добавить mingw в среду path
Как это сделать? Но у меня в среде path уже есть компилятор jdk, как добавить еще один компилятор?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&amp;d=1772460536 Одним из. . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru