stroke-opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2020å¹´3æâ©.

stroke-opacity å±æ§æå®äºå½åå¯¹è±¡çè½®å»çä¸éæåº¦ãå®çé»è®¤å¼æ¯ 1ã

ä½¿ç¨è¯´æ

ç±»å«	å¤è§å±æ§
å¼	<opacity-value> \| inherit
å¯åæ§	Yes

<opacity-value>: å¨å½åå¯¹è±¡çè½®å»ä¸ç¨è¯¥æ¶è²æä½çä¸éæåº¦ãä»»ä½è¶åº 0.0 å° 1.0 èå´çå¼é½ä¼è¢«ååè¿ä¸ªèå´ï¼0.0 è¡¨ç¤ºå®å¨éæï¼1.0 è¡¨ç¤ºå®å¨ä¸éæï¼ã

html

<svg width="120px" height="120px" viewBox="0 0 120 120">
  <rect x="10" y="10" width="100" height="100" />
</svg>

css

rect {
  fill: #b4da55;
  stroke: #000;
  stroke-width: 10px;
  stroke-opacity: 0.3;
}

ä¸ååç´ å¯ä»¥ä½¿ç¨stroke-opacityå±æ§ï¼

Specification
Scalable Vector Graphics (SVG) 2 # StrokeOpacity