SVG stroke-linecap

屬性介紹

  • butt (default)
  • round
  • square

butt (default)


svg(viewbox="-50 -50 100 100")
 line(x1=-40, y1=0, x2=40, y2=0)
 //path 中間畫一條線比較好觀察
 //M起始點
 //K終點
 path(d="M-40, 00 L40, 0")

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke-width: 10
  stroke: black
  stroke-linecap: butt
 path
  stroke: white

Display

round

比原本的線再多突出一個圓角


svg(viewbox="-50 -50 100 100")
 line(x1=-40, y1=0, x2=40, y2=0)
 path(d="M-40, 00 L40, 0")

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke-width: 10
  stroke: black
  stroke-linecap: round
 path
  stroke: white

Display

square

比原本的線再多突出一個角
(白色中線是原本的線長)


svg(viewbox="-50 -50 100 100")
 line(x1=-40, y1=0, x2=40, y2=0)
 path(d="M-40, 00 L40, 0")

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke-width: 10
  stroke: black
  stroke-linecap: square
 path
  stroke: white

Display

Leave a Reply

Your email address will not be published. Required fields are marked *