stroke-linecap - SVG 编辑

« SVG 属性 参照主页

stroke-linecap 属性制定了,在开放子路径被设置描边的情况下,用于开放自路径两端的形状。

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

使用背景

分类展现属性
属性值butt | round | square | inherit
可动画化
规范文档SVG 1.1 (2nd Edition)

Example

<?xml version="1.0"?>
<svg width="120" height="120"
     viewPort="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>

实时样例

元素

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:112 次

字数:2580

最后编辑:7年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文