我還不完全理解 SVG 是如何作業的。我知道 viewBox 與 SVG 的比例有關，而且我已經讀過在制作回應式 SVG 時我不應該有特定的高度和寬度屬性。我知道這里已經有幾個問題了，但由于我不明白，我要問一個更具體的問題。
我想制作一條水平 SVG 線，根據網頁的寬度改變長度。
到目前為止，我已經能夠用這段代碼畫一條水平線：
<svg id="horisontalLinje" width="500" height="5">
<line x1="0" y1="0" x2="500" y2="0"></line>
</svg>
CSS：
#horisontalLinje {
stroke: black;
stroke-width: 1;
}
問題是如上所述，這條線沒有回應。我想要的是這條線根據 SVG 所在網站的寬度百分比來獲得較低的“寬度”。就像在 CSS 中使用“vw”作為尺寸一樣。
uj5u.com熱心網友回復：
即使我真的很喜歡使用 SVG，有時一個簡單的解決方案也可以完成這項作業。在這個例子中，我設計了一個<hr>-水平線。在這種情況下，它更容易使用。
hr {
background: black;
height: 2px;
position: relative;
}
hr:before {
width: 10px;
height: 10px;
background: black;
content: '';
display: block;
position: absolute;
left: -2px;
top: -4px;
border-radius: 5px;
}
hr:after {
width: 10px;
height: 10px;
background: black;
content: '';
display: block;
position: absolute;
right: -2px;
top: -4px;
border-radius: 5px;
}<div style="width:100%">
<hr/>
</div>
<div style="width:66%">
<hr/>
</div>
<div style="width:33%">
<hr/>
</div>uj5u.com熱心網友回復：
出色地。我只是想通了...只需將“寬度”更改為“x vw”并將“x2”更改為與寬度相同。
uj5u.com熱心網友回復：
vw除非有人使用非常舊的瀏覽器，否則該方法將起作用。另一種更傳統的方法是使用viewBox.
#horisontalLinje {
stroke: black;
stroke-width: 1;
}<svg id="horisontalLinje" width="100%" height="1" viewBox="0 0 10 1" preserveAspectRatio="none">
<line x1="0" y1="0.5" x2="100" y2="0.5"></line>
</svg>SVG 的另一個問題是y坐標為 0。這意味著一半的線不在 SVG 視口的頂部。行的上半部分（螢屏外）從 -0.5 < y < 0 開始，可見的一半從 0 < y < 0.5 開始。換句話說，盡管設定stroke-width為 1。您實際上只看到 0.5 的筆劃。您可以通過將y坐標設定為 0.5 來解決此問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484351.html