我在調整網格內的 SVG 大小時遇到??問題。我對 SVG 了解不多（除了如何創建它們并從 Illustrator 匯出它們，并且我們可以通過使用顏色、填充、筆觸等屬性來自定義它們）
我創建了一支筆來使這更容易理解。我只想將起點與 line-1 對齊，將 SVG 的終點與 line-2 對齊，如下所示
正如您所看到的，SVG 并不關心我為網格設定的大小是溢位。
截圖在這里：
我們可以使用填充來對齊，但我不想讓網格適應 SVG 大小，而是相反。很明顯，我不想得到類似下面的結果，因為 SVG 太長并且 3 行之間的距離太大。
.container {
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0em 0px;
grid-auto-flow: row;
grid-template-areas: "svg-icon line-1" "svg-icon line-2" "svg-icon line-3";
width: 10rem;
height: 6rem;
}
.line-1 {
grid-area: line-1;
font-size: 1.25em;
}
.line-2 {
grid-area: line-2;
font-size: 1em;
}
.line-3 {
grid-area: line-3;
font-size: 1.25em;
}
.svg-icon {
grid-area: svg-icon;
}<div class="container">
<div class="line-1">This is the line 1</div>
<div class="line-2">This is the line 2</div>
<div class="line-3">This is the line 3</div>
<div class="svg-icon">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.24 41.91"><path
d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
transform="translate(-0.01)"
fill="#fff"
/><path
d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
transform="translate(-0.01)"
/><path
d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
transform="translate(-0.01)"
fill="#fff"
/><path
d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
transform="translate(-0.01)"
/><line
x1="2.61"
y1="4.87"
x2="2.61"
y2="37.14"
fill="none"
stroke="#000"
stroke-miterlimit="10"
stroke-width="2"
/>
<circle cx="2.61" cy="2.62" r="2.12" fill="#fff" /><circle
cx="2.62"
cy="39.29"
r="2.12"
fill="#fff"
/>
</svg>
</div>
</div>非常感謝您的幫助。
解決方案
We can't set a height on a grid because the height of the grid is essentially determined by the width of the SVG element. So I guess we just have to remove the height on the grid and just play around with the width of the SVG so try to get the desired height of the whole thing.
.container {
display: grid;
height: 400px;
grid-template-areas: "svg-icon line-1" "svg-icon line-2" "svg-icon line-3";
grid-template-columns: 4rem;
}
.svg-icon svg {
width: 3rem;
height: 100%;
}
.line-1 {
grid-area: line-1;
font-size: 2em;
margin-top: 0.8rem;
align-self:start;
}
.line-2 {
grid-area: line-2;
font-size: 1em;
align-self:center;
}
.line-3 {
grid-area: line-3;
font-size: 2em;
align-self:end;
margin-bottom: 0.8rem;
}
.svg-icon {
grid-area: svg-icon;
justify-self: center;
}
.my-block {
border: solid red 1px;
padding: 0.25rem;
}
.container div {
border: 1px solid lime;
}<div class="my-block">
<div class="container">
<div class="line-1">This is the line 1</div>
<div class="line-2">This is the line 2</div>
<div class="line-3">This is the line 3</div>
<div class="svg-icon">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.24 41.91"><path
d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
transform="translate(-0.01)"
fill="#fff"
/><path
d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
transform="translate(-0.01)"
/><path
d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
transform="translate(-0.01)"
fill="#fff"
/><path
d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
transform="translate(-0.01)"
/><line
x1="2.61"
y1="4.87"
x2="2.61"
y2="37.14"
fill="none"
stroke="#000"
stroke-miterlimit="10"
stroke-width="2"
/>
<circle cx="2.61" cy="2.62" r="2.12" fill="#fff" /><circle
cx="2.62"
cy="39.29"
r="2.12"
fill="#fff"
/>
</svg>
</div>
</div>
</div>uj5u.com熱心網友回復：
通常，當您遇到 css 問題時，您可以洗掉一些內容來解決問題 - 在這里添加更多并不總是“更多”。所以我們可以洗掉
grid-template-columns: 1fr 5fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0em 0px;
grid-auto-flow: row;
仍然很大，但這是您選擇的寬度和高度。
.my-block {
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: 25rem auto;
/* remove the auto to get the trees below for example */
}
.container {
grid-row: 1;
grid-column: 1;
display: grid;
grid-template-areas: "svg-icon line-1" "svg-icon line-2" "svg-icon line-3";
grid-template-columns: 4rem auto;
}
.line-1 {
grid-area: line-1;
font-size: 2em;
}
.line-2 {
grid-area: line-2;
font-size: 1em;
}
.line-3 {
grid-area: line-3;
font-size: 2em;
}
.svg-icon {
grid-area: svg-icon;
justify-self: center;
}
.svg-icon svg {
width: 2rem;
height: 100%;
}
.my-block {
border: solid red 1px;
padding: 0.25rem;
}
.container div {
border: 1px solid lime;
}<div class="my-block">
<div class="container">
<div class="line-1">This is the line 1</div>
<div class="line-2">This is the line 2</div>
<div class="line-3">This is the line 3</div>
<div class="svg-icon">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.24 41.91"><path
d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
transform="translate(-0.01)"
fill="#fff"
/><path
d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
transform="translate(-0.01)"
/><path
d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
transform="translate(-0.01)"
fill="#fff"
/><path
d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
transform="translate(-0.01)"
/><line
x1="2.61"
y1="4.87"
x2="2.61"
y2="37.14"
fill="none"
stroke="#000"
stroke-miterlimit="10"
stroke-width="2"
/>
<circle cx="2.61" cy="2.62" r="2.12" fill="#fff" /><circle
cx="2.62"
cy="39.29"
r="2.12"
fill="#fff"
/>
</svg>
</div>
</div>
<div>I have more happy trees than you</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/326060.html