3

Стал изучать тег path в svg пытаюсь сделать такую линию:

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

Вот что получается:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 200 32" xml:space="preserve">
       <path d='M0 0 l85 0, 115 32, 200 32' />
</svg>

Вроде координаты правильно указываю, но что-то идет не так.

1 ответ 1

3

С запятыми была путаница.

  • Нужно запятыми разделять два соседних положительных числа, которые указывают на координаты x y, а узловые точки пути разделять пробелами. (можно запятыми не разделять соседние положительные цифры, а разделить их пробелами, но с запятыми более наглядно).

Update
Если в формуле патча присутствуют команды L(lineto), C(curveTo), A(Elliptical Arc) и другие команды формулы патч, то перед ними не нужно ставить запятые:

<path d="M0 0 L85 0, 115 32, 200 32 <path d="M10 10 C20 20, 40 20, 50 10

О других форматах записи данных path можно почитать здесь

  • Если не указано fill="none" то, по умолчанию устанавливается fill="black" и весь путь закрашивается сплошным чёрным цветом.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50%" height="50%" viewBox="0 0 200 32" style="border:1px solid red;">
 
       <path d="M0,1 90,1 120,31 200,31" fill="none" stroke="black" stroke-width="1" />
	
</svg>

  • Можно с помощью <polyline> нарисовать точно такую же ломанную линию

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50%" height="50%" viewBox="0 0 200 32" >
 
     <polyline points="0,1 90,1 120,31 200,31" fill="none" stroke="black" stroke-width="1" />
	
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.