0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
2
<ul><li>Theory</li>
2
<ul><li>Theory</li>
3
<li>Theory</li>
3
<li>Theory</li>
4
<li>Comments</li>
4
<li>Comments</li>
5
</ul><h2>Stroke Opacity</h2>
5
</ul><h2>Stroke Opacity</h2>
6
<p>The opacity is set using the stroke-opacity property with values ranging from 0 to 1, for example: stroke-opacity = "0.5".</p>
6
<p>The opacity is set using the stroke-opacity property with values ranging from 0 to 1, for example: stroke-opacity = "0.5".</p>
7
<p>Or via CSS:</p>
7
<p>Or via CSS:</p>
8
rect { stroke-opacity: 0.5; }<h2>Comments</h2>
8
rect { stroke-opacity: 0.5; }<h2>Comments</h2>
9
<ul><li>object.svg</li>
9
<ul><li>object.svg</li>
10
<li>style.css</li>
10
<li>style.css</li>
11
</ul><p>SVG</p>
11
</ul><p>SVG</p>
12
<p><svg width="300" height="150"> <circle r="50" cx="75" cy="75" fill="none" stroke="darkorange" stroke-width="40"></circle> <circle r="50" cx="150" cy="75" fill="none" stroke="gold" stroke-width="40"></circle> <circle class="shape-stroke" r="50" cx="225" cy="75" fill="none" stroke="lightseagreen" stroke-width="40"></circle> </svg></p>
12
<p><svg width="300" height="150"> <circle r="50" cx="75" cy="75" fill="none" stroke="darkorange" stroke-width="40"></circle> <circle r="50" cx="150" cy="75" fill="none" stroke="gold" stroke-width="40"></circle> <circle class="shape-stroke" r="50" cx="225" cy="75" fill="none" stroke="lightseagreen" stroke-width="40"></circle> </svg></p>
13
<p>CSS</p>
13
<p>CSS</p>
14
<p>svg { border: 1px solid #dddddd; }</p>
14
<p>svg { border: 1px solid #dddddd; }</p>
15
<p>Thanks! We’ll fix everything at once!</p>
15
<p>Thanks! We’ll fix everything at once!</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
17
<p>You’ve gone to a different page</p>
17
<p>You’ve gone to a different page</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
19
<p>100%</p>
19
<p>100%</p>
20
<ol><li>Use the attribute to assign a stroke opacity value of 0.7 to the first shape,</li>
20
<ol><li>Use the attribute to assign a stroke opacity value of 0.7 to the first shape,</li>
21
<li>and then assign an opacity value of 0.6 to the second shape.</li>
21
<li>and then assign an opacity value of 0.6 to the second shape.</li>
22
<li>In the CSS, set the opacity of the stroke to 0.5 for the third shape.</li>
22
<li>In the CSS, set the opacity of the stroke to 0.5 for the third shape.</li>
23
</ol>
23
</ol>