Наложение стрелки на текст с фиксированной шириной

Question

Я хочу написать текстовый редактор, который показывает результат команд перемещения от одного символа, где курсор находится к другому символу в тексте, возможно, на другой строке.

Текст будет фиксированным -код ширины, поэтому холст можно считать сеткой N x N.В идеале мне нужен какой-нибудь инструмент, который может нарисовать стрелку из одной позиции в этой сетке в другую позицию.

Существуют разные соображения, например, могу ли я сделать лучше, чем растровое изображение текста + наложенная стрелка, илиЯ мог бы сделать что-то необычное, например, визуализировать текст как текст, а затем наложить прозрачное изображение SVG на векторизованную стрелку.

Как инженер, в основном серверный сервер, я нахожу такие задачи особенно сложными.Так что любая помощь будет принята с благодарностью.(Рад опубликовать этот вопрос в другом месте, если это неправильное место, или добавить какие-либо подробности.)

Answer 1

Поскольку это, как вы говорите, сетка, вы должны знать координаты x, y для начала и конца линии.Они переводятся в атрибуты x1, y1 и x2, y2 в строке svg ниже:

html {
  font-family: monospace;
  background-color: #efefef;
}

.text {
  background-color: #ffffff;
  position: relative;
}

.text svg {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  line-height: 120%;
}

.text,
.text svg {
  width: 400px;
  height: 150px;
}

<p class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.


  <svg viewBox="0 0 400 150">
  
    <defs>
      <pattern id="smallGrid" y="12" width="7.8" height="15" patternUnits="userSpaceOnUse">
       <path d="M 15 0 L 0 0 0 15" fill="none" stroke="rgba(50,0,255,0.3)" stroke-width="0.5"/>
      </pattern>
      <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
      </marker>
    </defs>
    
    <rect width="400" height="150" fill="url(#smallGrid)" />
    <line x1="39" y1="12" x2="156" y2="68" stroke="#000" stroke-width="1" marker-end="url(#arrow)" />

  </svg>
</p>