stroke

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

stroke 是一个表现属性,它定义了图形的外轮廓的颜色(或者是任何 SVG 绘画方式,如渐变或图案)。

备注: 作为一个表现属性,stroke 可以用作 CSS 属性。参见 stroke 以了解更多信息。

你可以将此属性与以下 SVG 元素一起使用:

示例

基础颜色和渐变色描边

html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- 使用单一颜色描边 -->
  <circle cx="5" cy="5" r="4" fill="none" stroke="green" />

  <!-- 使用渐变色描边 -->
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>

  <circle cx="15" cy="5" r="4" fill="none" stroke="url(#myGradient)" />
</svg>

输出如下:

context-stroke 示例

在这个示例中,我们使用 <path> 元素定义了三个形状的图形,每个图形都设置了不同的 strokefill 颜色。我们还通过 <marker> 元素将 <circle> 元素定义为标记。每个图形都通过 marker CSS 属性应用了标记。

<circle> 元素上设置了 stroke="context-stroke"fill="context-fill"。因为它被设置为图形的上下文标记,所以这些属性会导致它在各种情况下都会继承设置在 <path> 元素上的 fillstroke

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <style>
    path {
      stroke-width: 2px;
      marker: url(#circle);
    }
  </style>
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z"
        stroke="red" fill="orange" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z"
        stroke="green" fill="lightgreen" />
  <path d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z"
        stroke="blue" fill="lightblue" />
  <marker id="circle" markerWidth="12" markerHeight="12"
          refX="6" refY="6" markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2"
            stroke="context-stroke" fill="context-fill"  />
  </marker>
</svg>

输出如下:

备注: 当元素被 <use> 元素引用时,元素还可以使用 context-strokecontext-fill 来继承 strokefill 的值。

用法

<paint>
默认值 none
动画性

规范

Specification
Scalable Vector Graphics (SVG) 2
# SpecifyingStrokePaint

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stroke
context-stroke value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support