理解SVG的CSS樣式

Question

我想了解CSS樣式是如何工作的在這裏SVG裏面是SVG的爲例我使用：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"> <defs> 
 
    <style>.cls-1{isolation:isolate;}.cls-2,.cls-3{fill:#ef8989;}.cls-3{mix-blend-mode:screen;}</style> 
 
</defs> 
 
<title>アセット 2</title> 
 
<g class="cls-1"> 
 
<g id="レイヤー_2" data-name="レイヤー 2"> 
 
<g id="レイヤー_1-2" data-name="レイヤー 1"> 
 
<polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/><polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/> 
 
<polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/> 
 
</g> 
 
</g> 
 
</g> 
 
</svg>

這裏是如何我試圖內聯樣式移動到外部CSS文件：

.cls-1 { 
 
    isolation : isolate; 
 
} 
 
.cls-3 { 
 
    mix-blend-mode : screen; 
 
    fill : #ef8989; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"> 
 
<g class="cls-1"> 
 
    <polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/> 
 
    <polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/> 
 
    <polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/> 
 
</g> 
 
</svg>

很明顯，我不明白如何將內聯樣式轉換爲CSS樣式，我的猜測是我的問題在這裏：.cls-1{isolation:isolate;}.cls-2, 我必須爲類cls-2指定一些東西，但沒有管理讓我的頭在這附近。

感謝您的任何澄清和抱歉，如果問題已經被問到找不到任何有關它。

Matth