6 / 5 / 3
Регистрация: 16.01.2016
Сообщений: 255
1

Svg добавить path

01.01.2019, 19:16. Показов 1356. Ответов 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
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
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...

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

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

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

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.01.2019, 19:16

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.