Как разместить треугольники стрелки на линиях SVG?

Я новичок в SVG, и я пытаюсь провести прямую линию между двумя точками. До сих пор я использовал эту команду:

"

Каков самый простой способ добавить крошечные треугольники или головки стрелок (равномерно распределенные) по этой линии, чтобы указать направление?

Изменить 1:

Чтобы быть более ясным, я не стрелка в конце строки, а несколько треугольников (равномерно распределенных) по всей линии. Если возможно, я хотел бы заменить каждую штриховку пунктирной линией треугольником, указывающим направление линии.

Изменить 2

Основываясь на предположении Фрогца, я создал страницу, как показано ниже, но ничего не появляется. Что я делаю не так?

      Untitled Document             midMarkers(document.querySelector('polyline'),6); // Given a polygon/polyline, create intermediary points along the // "straightaways" spaced no closer than `spacing` distance apart. // Intermediary points along each section are always evenly spaced. // Modifies the polygon/polyline in place. function midMarkers(poly,spacing){ var svg = poly.ownerSVGElement; for (var pts=poly.points,i=1;i0;--j){ var pt = svg.createSVGPoint(); pt.x = p0.x+dx*j; pt.y = p0.y+dy*j; pts.insertItemBefore(pt,i); } if (numPoints>0) i += numPoints-1; } }    

На основе уточнения вопроса, вот реализация создания промежуточных точек вдоль элемента , так что атрибут marker-mid="url(#arrowhead)" будет работать. Ниже приведено введение для маркеров и наконечников стрел.

Демо: http://jsfiddle.net/Zv57N/

 midMarkers(document.querySelector('polyline'),6); // Given a polygon/polyline, create intermediary points along the // "straightaways" spaced no closer than `spacing` distance apart. // Intermediary points along each section are always evenly spaced. // Modifies the polygon/polyline in place. function midMarkers(poly,spacing){ var svg = poly.ownerSVGElement; for (var pts=poly.points,i=1;i0;--j){ var pt = svg.createSVGPoint(); pt.x = p0.x+dx*j; pt.y = p0.y+dy*j; pts.insertItemBefore(pt,i); } if (numPoints>0) i += numPoints-1; } } 

Вышеприведенный код модифицирует существующий элемент чтобы добавить точки на каждый промежуточный блок вдоль каждого прямого края. Объедините это с marker-mid чтобы поместить повернутый маркер в каждую вершину, и у вас есть возможность последовательно рисовать произвольно сложные фигуры / графику вдоль вашего пути.

Птицы

Хотя код помещает точки равномерно вдоль каждого сегмента (так что в углах не возникает неприглядная «группировка»), поскольку приведенная выше демонстрация показывает, что код не удаляет точки, которые у вас уже есть на вашем пути, которые ближе друг к другу, чем расстояние стоимость.


(Ниже следует ответ «Вступление к маркерам»).


Вы хотите определить элемент SVG и добавить в свою строку атрибуты marker-start="…" и / или marker-end="…" . Использование маркера копирует любую произвольную фигуру на конец (ы) вашего пути и (с orient="auto" ) вращает форму для соответствия.

         

Демо: http://jsfiddle.net/Z5Qkf/1/

Изогнутая линия с наконечником стрелки

В приведенном выше:

  • orient="auto" заставляет маркер вращаться с линией
  • markerWidth и markerHeight определяют ограничивающий прямоугольник (например, viewBox) для использования для маркера.
    • Обратите внимание, что они затем масштабируются по stroke-width последней строки; имеющий высоту «4», в конечном чертеже он составляет 20 единиц ширины (4 × 5).
  • refX и refY определяют, где «происхождение» находится при размещении фигуры в конце пути
    • Я использовал refX="0.1" чтобы убедиться, что маркер частично перекрывает конец строки
  • Для правильной работы автоматической ориентации вы хотите, чтобы направление «вперед» маркера находилось в направлении + x. (Красный путь, используемый для маркера, выглядит следующим образом: ▶ при отключении.)
  • Вы можете отрегулировать fill-opacity stroke-opacity маркера и / или линии независимо, но изменения opacity линии также повлияют на рисованный маркер.
    • Так как линия и маркер перекрываются, если вы уменьшаете fill-opacity маркера, вы увидите перекрытие; однако, если вы уменьшите opacity самой линии, маркер будет полностью непрозрачен по линии, а затем комбинация из двух будет уменьшена в непрозрачности.
      введите описание изображения здесь

Если вам нужны стрелки вдоль длины линии, вам нужно будет использовать marker-mid="…" с помощью или и промежуточных точек вдоль линии.

Демо: http://jsfiddle.net/Z5Qkf/2/

введите описание изображения здесь

Единственная проблема заключается в том, что любая точка, изменяющая направление вдоль линии, искажает ориентацию ; вот почему в демо я использовал кривую Безье, чтобы обогнуть угол так, чтобы средняя точка на линии была по прямой.

              

Чтобы сделать это процедурно, вы можете использовать JavaScript и команду getPointAtLength() для пути к выборке пути .

  • Преобразование строки в байтовый массив в C #
  • Удалить пробел из строки в Objective-C
  • Репликация массива по элементам в Matlab
  • Операция XOR с двумя строками в java
  • Как удалить разрывы строк из файла в Java?
  • Изменение строковых констант?
  • Метод split () в Java не работает с точкой (.)
  • Как присвоить данные для команды curl?
  • Подстрочный индекс и надстрочный указатель строки в Android
  • Как использовать «.» Как разделитель с String.split () в java
  • Получить индекс n-го вхождения строки?
  • Давайте будем гением компьютера.