紀錄：CSS優先級

最近看到以下2篇文章，可以很好的了解 CSS 優先級的處理

• web.dev > 瞭解詳情 > CSS > 優先權
• ExplainThis：請說明 CSS 選擇器的優先級

SVG 文字置中

首先是個普通的 SVG：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" width="300">
	<g fill="none" stroke="rgba(22, 22, 22, 0.5)">
		<path d="M 90 90 L 110 110 Z"/>
		<path d="M 110 90 L 90 110 Z"/>
	</g>
	<text font-family="Arial, sans-serif" x="100" y="100" font-size="30">Hi! quick fox</text>
</svg>

為了方便辨識，在 (100, 100) 的位置打了個叉。

上面的 SVG 可以看出來，文字無論是 x 軸還是 y 軸都沒有置中。