stroke
CSS stroke Property
The stroke property paints along the outline of the given graphical element.
The fill and stroke properties specify the paint used to render the interior and the stroke around shapes and text.
You can find web colors in the HTML colors section.
The presentation attribute will be overridden: e.g. <path stroke="#1c87c9" … />, it will be overridden. The inline style won’t be overridden: e.g. <path style=“stroke: #1c87c9;” … />.
The stroke property can be used as a CSS property as a presentation attribute. It can be applied to any element but can have an effect only on the following elements: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text> ,<textPath>, <tref>, and <tspan>.
| 类目 | 类目 |
|---|---|
| Initial Value | none |
| Applies to | Shapes and text content elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | SVG 1.1 Specification |
| DOM Syntax | Object.stroke = “#1c87c9”; |
Syntax
Syntax
stroke: color | url | none | context-fill | context-stroke | initial | inherit;
Example of the stroke property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke property example</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>
Result
Example of the stroke property with the <svg> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke property example</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>
Values
Values
| Value | Description |
|---|---|
| none | No paint is applied. |
| color | Sets a solid color. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. |
| url | A URL reference to a paint server element defining a paint server. |
| context-fill | Uses the value of fill from a context element. |
| context-stroke | Uses the value of stroke from a context element. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |