У SVG скошенная линия

272
23 ноября 2017, 02:09

svg { 
  margin: 20px; 
}
<svg viewBox="0 0 100 100" 
     width="350px"   
     height="70px" 
     preserveAspectRatio="none" 
     transform="scale(1,-1)"> 
  <path d="M 0,0 
           L 20,90 
           L 40 10 
           L 70 10"  
        fill="none"  
        stroke-linecap="round" 
        stroke="#886ce6" 
        stroke-width="5px"/> 
 
</svg>

как мне сделать край линии прямоугольным? Так же линии имеют разную ширину. Может это и очевидно, но как этого избежать? svg для меня пока еще слабо знаком просто

Answer 1

Смотри, у тебя вьюбокс базовый - 100 на 100 пикселей, а ты его растянул 350 на 70, поэтому и линии могут быть разные.

Кроме того странное transform="scale(1,-1) - это для чего?

stroke-linecap - отвечает за углы, возможные значения: butt, round, square. у тебя - round, это их и круглит. Или удалить или поменять на square например.

READ ALSO
Выравнивание полями margin

Выравнивание полями margin

Подскажите почему свойство margin не выравнивает список ul по вертикали Поле справа слева добавляет, верх низ не выравнивает http://cssdeckcom/labs/5en

217
Bootstrap 4 dropdown menu не под кнопкой

Bootstrap 4 dropdown menu не под кнопкой

Не могу понять как сделать вывод dropdown-menu не под кнопкой а под самим меню, чтобы ширина этого dropdown-menu была равна ширине основной строки дабы...

406
Тег в атрибуте (alt=&ldquo;html tag&rdquo;)

Тег в атрибуте (alt=“html tag”)

У меня есть вопрос по HTML

239