是否可以垂直居中對齊標簽內的所有矩形而無需調整 y 屬性<rect>？（例如見片段）
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="1" width="6" height="5" />
<rect x="20" y="1" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="1" width="6" height="5" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>
<h3>desired result</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="8" width="6" height="5" />
<rect x="20" y="6" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="8" width="6" height="5" />
<rect x="50" y="4" width="6" height="15" />
</g>
</svg>uj5u.com熱心網友回復：
不，不可能居中對齊<rect>元素。
但是可以將<line>元素居中對齊并給它們一個筆畫寬度（注意viewBox垂直居中于 0 附近）：
<svg viewBox="0 -19 225 38" width="100%" height="100%">
<g stroke="black">
<line x1="10" x2="16" stroke-width="5" />
<line x1="20" x2="26" stroke-width="10" />
<line x1="30" x2="36" stroke-width="20" />
<line x1="40" x2="46" stroke-width="5" />
<line x1="50" x2="56" stroke-width="15" />
</g>
</svg>uj5u.com熱心網友回復：
<rect>您還可以通過設定transform: translate(0, -50%)css 規則來實作垂直居中的元素。
這種方法還需要一個transform-box: fill-box;（或內容框）屬性。
所有<rect>元素都有一個y="50%"屬性，從 svg viewBox 的垂直中心開始。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" width="100%" height="100%" style="border:1px solid #ccc">
<style>
rect {
transform: translate(0, -50%);
transform-origin: center;
transform-box: fill-box;
}
</style>
<g fill="black" >
<rect x="10" y="50%" width="6" height="5" />
<rect x="20" y="50%" width="6" height="10" />
<rect x="30" y="50%" width="6" height="20" />
<rect x="40" y="50%" width="6" height="5" />
<rect x="50" y="50%" width="6" height="15" />
</g>
</svg>瀏覽器支持transform-box是不錯的。（見犬）。
但是，如果您需要舊版瀏覽器（例如 ie11）支持，@ccprog 的答案是更強大的解決方案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486844.html
標籤：svg
上一篇：SVG樣式的問題
下一篇：分隔svg檔案的各個部分