我有一個里面有 SVG 的 div
div 由藍點勾勒，SVG 由綠色勾勒。我的 HTML 檔案中的 SVG 代碼：
<svg class="svg" height="500px" width="50%">
<g class="chart" transform="translate(0,0)">
<g class="state-g"> (Map here) </g>
</g>
</svg>
我的相關 CSS：
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.container {
position: relative;
align-content: center;
padding-left: 10%;
padding-right: 10%;
}
.svg {
outline: 5px dotted blue;
font: inherit;
display: block;
margin: auto;
}
svg g.chart {
outline: 5px dotted green;
uj5u.com熱心網友回復：
如果您希望 SVG 自動縮放以填充其容器，則它需要具有一個viewBox屬性。
<svg class="svg" viewBox="...something...">
<g class="chart" transform="translate(0,0)">
<g class="state-g"> (Map here) </g>
</g>
</svg>
正確的值viewBox將取決于該 SVG的內容范圍。檢查您的原始地圖檔案：
- 如果它有
viewBox，則使用它。 - 如果它沒有
viewBox，但它有硬連線width和height，然后使用那些。例如，如果它有width="200px" height="350px"，則將這些值替換為viewBox="0 0 200 350"。 - 如果兩者都沒有。然后您需要計算出正確的 viewBox 值。有幾種方法可以做到這一點。查看 StackOverflow 上的其他問題以獲取一些解決方案。或者發布一個指向您的 SVG 的鏈接，我們可以告訴您它應該是什么。
uj5u.com熱心網友回復：
嘗試在您所在的標簽中將寬度和高度設定為 100% (Map here)。例如我使用<rect/>.
rect {
width: 100%;
height: 100%;
fill: green;
}
顯示代碼片段
const btn = document.querySelector('#resize');
const btn2 = document.querySelector('#rem-pad');
const svg = document.querySelector('svg');
const container = document.querySelector('.container');
btn.addEventListener('click', () => {
svg.classList.toggle('fill');
});
btn2.addEventListener('click', () => {
container.classList.toggle('rem-pad');
});body,
html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
/* extra properties */
background-color: hsl(201, 27%, 10%);
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.container {
position: relative;
align-content: center;
padding-left: 10%;
padding-right: 10%;
outline: 5px dotted red;
margin-top: 10px;
/* new line */
}
.svg {
outline: 5px dotted blue;
font: inherit;
display: block;
margin: auto;
}
svg g.chart {
outline: 5px dotted green;
}
/* new classes */
.fill {
width: 100%;
}
.container.rem-pad {
padding-left: 0;
padding-right: 0;
}
rect {
width: 100%;
height: 100%;
fill: green;
}
.btns {
display: flex;
}
button {
padding: 1rem 2rem;
background: green;
}<div class="container">
<svg class="svg fill" height="180px" width="50%">
<g class="chart" transform="translate(0,0)">
<g class="state-g">
<rect x="0" y="0" />
</g>
</g>
</svg>
</div>
<div class="btns">
<button id="resize">resize</button>
<button id="rem-pad">remove padding</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/374149.html
標籤：javascript html svg
上一篇：滑塊的CSSSVG影片