We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

« SVG Attribute reference home

the stroke-linecap attribute specifies the shape to be used at the end of open subpaths when they are stroked.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet

Usage context

Categories Presentation attribute
Value butt | round | square | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)


<?xml version="1.0"?>
<svg width="120" height="120"
     viewBox="0 0 120 120" version="1.1"

    <line stroke-linecap="butt"
          x1="30" y1="30" x2="30" y2="90"
          stroke="black" stroke-width="20"/>

    <line stroke-linecap="round"
          x1="60" y1="30" x2="60" y2="90"
          stroke="black" stroke-width="20"/>

    <line stroke-linecap="square"
          x1="90" y1="30" x2="90" y2="90"
          stroke="black" stroke-width="20"/>

    <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
          stroke="white" />

Live sample


The following elements can use the stroke-linecap attribute

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? ? ? ?


此頁面的貢獻者: connorshea, GamerWang, trevorh, Jeremie
最近更新: connorshea,