CSS stroke属性-之路教程

CSS stroke 属性值说明

值	描述
none	没有涂漆。
color	设置纯色。可以使用颜色名称，十六进制颜色代码，RGB（），RGBA（），HSL（），HSLA（）。
url	对Painting Server元素的URL引用定义绘制服务器。
context-fill	使用填充值从上下文元素。
context-stroke	使用来自上下文元素的笔划值。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

语法

stroke: color | url | none | context-fill | context-stroke | initial | inherit;

描边属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <h2>Stroke 属性示例</h2>
    <svg height="100" width="500">
      <g fill="none">
        <path stroke="#8ebf42" d="M5 20 l215 0" />
        <path stroke="#1c87c9" d="M5 40 l215 0" />
        <path stroke="#666666" d="M5 60 l215 0" />
      </g>
    </svg>
  </body>
</html>

带有 <svg> 标签的 stroke 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <h2>Stroke 属性示例</h2>
    <svg viewBox="5 5 100 100">
      <style>
        path {
          fill: none;
          stroke-width: 3px;
          marker: url(#diamond);
        }
      </style>
      <path d="M 10,50 v -20 h 40 v -20" stroke="#666" />
      <path d="M 30,70 v -20 h 40 v -20" stroke="#8ebf42" />
      <path d="M 50,90 v -20 h 40 v -20" stroke="#1c87c9" />
      <marker id="diamond" markerWidth="12" markerHeight="12" refX="6" refY="6" markerUnits="userSpaceOnUse">
        <circle cx="6" cy="6" r="3" fill="#000" stroke="#ccc" stroke-width="1,5" />
      </marker>
    </svg>
  </body>
</html>

CSS stroke属性

stroke 属性沿着给定图形元素的轮廓绘制。

填充和描边属性指定用于渲染内部的绘制以及围绕形状和文本的描边。

我们可以在 HTML 颜色部分找到 Web 颜色。

展示属性将被覆盖：例如 <path stroke="#1c87c9" ... ></path>，它将被覆盖。
内联样式不会被覆盖：例如 <path style="stroke: #1c87c9;" ... ></path>。

stroke 属性可以用作 CSS 属性作为表示属性。
它可以应用于任何元素，但只能对以下元素产生影响：<altGlyph>、<circle>、<ellipse>、<line>、<path>、<polygon>、<polyline>、<rect>、 <text> 、<textPath>、<tref> 和 <tspan>。

初始值	none
应用于	形状和文本内容元素。
继承	可继承
可动画的	无效
版本	SVG 1.1规格
DOM 语法	object.stroke =“#1c87c9”;

日期：2020-06-02 22:14:46 来源：oir作者：oir

←CSS stroke-width 属性

CSS tab-size 属性→

CSS stroke 属性值说明

语法

描边属性示例：

带有 <svg> 标签的 stroke 属性示例：

目录