首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

stroke-linecap

stroke-linecap属性指定打开的子路径末尾使用的形状。

作为一个表现属性,它也可以直接在CSS样式表中作为属性使用

用法说明

分类

呈现属性

对接| 圆| square | 继承

动画

规范性文件

SVG 1.1(第二版)

例子

代码语言:javascript
复制
<?xml version="1.0"?>
<svg width="120" height="120"
     viewBox="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <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" />
</svg>

Live sample

元素

以下元素可以使用该stroke-linecap属性

  • Shape elements »
  • Text content elements »

扫码关注腾讯云开发者

领取腾讯云代金券