Блог

Главная - Вопросы по программированию - Как сгладить линию SVG

Как сгладить линию SVG

#svg

Вопрос:

Exmaple находится по ссылке

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

 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
    </svg>

Как вы можете заметить, в конце строки срезан угол, не заполненный до конца границы. Как это сгладить?

Комментарии:

1. Он обрезан, потому что x2 равен 100, что соответствует ширине окна просмотра.

Ответ №1:

Угол усечен, потому что он выходит за рамки вашего холста. Просто сделайте свой холст немного больше или свою линию немного меньше, и это сработает

Вот пример, где я переместил линию на 1 единицу вправо и сделал холст немного больше. Вы можете видеть, что углы такие, какими они должны быть

 <svg viewBox="0 0 101 100" xmlns="http://www.w3.org/2000/svg">
      <line x1="1" y1="80" x2="100" y2="20" stroke="black" />
    </svg>

Комментарии:

1. Не работает, установите границу в svg, и вы увидите пробел между границей и концом строки

2. Если включить x2="101" , это работает, но это не очень хорошая идея

3. Я переместил x1 в 1 и сделал холст шириной 101 единицу. Ваши углы срезаны, потому что они прорисованы за пределами окна просмотра. Вы не можете рисовать за пределами своего окна просмотра. Единственный способ добиться того, чего вы хотите, — это либо увеличить поле просмотра, чтобы оно могло вместить всю строку, либо сделать строку меньше, чтобы она помещалась в поле просмотра. Нет никакого способа нарисовать окно просмотра

4. Я не понял, что вы сделали, установите svg { border:1px solid red; } и проверьте

5. Нужно ли мне developer.mozilla.org/en-US/docs/Web/SVG/Attribute/… ?

Ответ №2:

Вам нужно уточнить, что вы подразумеваете под «заполнено до конца границы».

Если вы имеете в виду, что хотите, чтобы линия проходила до границы SVG, не видя ее конца, то есть два решения.

  1. Нарисуйте свою линию немного длиннее. Так что это полностью выходит за рамки SVG. Прямо сейчас он останавливается прямо на границе, и из-за угла видна часть конца.
 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="-2" y1="80" x2="102" y2="20" stroke="black" />
</svg>
  1. В качестве альтернативы вы могли бы придать линии квадратные заглушки. Это немного расширит линию, так что она зайдет достаточно далеко. Однако это сработает только в том случае, если ваша линия не слишком крутая. Если она станет круче 45 градусов, конец линии снова начнет становиться видимым.
 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" stroke-linecap="square" />
</svg>

Комментарии:

1. Я использую холст 2d

Метки: