我設定了一個 div，橙色的
position:relative
和一個絕對位于底部的 SVG 容器。SVG 只是 10x700 視口中間的三角形路徑
<div class="sections-divider bottom">
<svg class="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 10" preserveAspectRatio="none">
<path fill="rgba(255, 255, 255, 1)" d="M360 0L350 10 340 0 0 0 0 10 700 10 700 0"></path>
</svg>
</div>
CSS 代碼：
/* Sections Separator */
.sections-divider {
position: absolute;
left: 0;
width: 100%;
display: flex;
}
.sections-divider svg { width: 100%; height: 100%}
.sections-divider.bottom {bottom: 0; top: auto}
有時，并非總是如此，在頁面渲染期間，SVG 并不完全位于底部，它在頂部大約 0.8 像素，并且可以看到底部 div 的橙色線，如隨附的螢屏截圖。尤其是在打開 chrome 開發工具時會發生這種情況。
我幾乎嘗試了一切。
問題是，如果我這樣做
bottom: -1px
橙色線消失了，但三角形的底角被切割了 1 個像素，變成了梯形
我錯過了什么嗎？
謝謝
uj5u.com熱心網友回復：
這可能聽起來很奇怪，而且它確實似乎是一個渲染錯誤，但我解決它的方法是在 SVG 上設定 -1px 負邊距。在您的情況下，例如：
.sections-divider svg {
margin: -1px;
}
這似乎總是為我解決它。
如果這仍然切斷了東西，我的猜測是你可以嘗試更小的（甚至可能是半像素）值，但我認為單個像素值是最小的跨瀏覽器安全單元。
此外，您可以嘗試在 SVG（視圖框）的寬度和高度上添加一個像素，然后在 CSS 中應用此技巧。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/492508.html
上一篇：用于執行svg文本的自定義放置的Javascript
下一篇：從AJAX呼叫渲染SVG圖形