這個：
<svg width=100 height=100>
<g transform="translate(0.5, 0.5)" stroke=red fill=none>
<line x1=10 y1=10 x2=10 y2=50 />
<path d="M20,10 H20 V50 H20 Z" />
<path d="M30,10 H31 V50 H30 Z" />
<path d="M40,10 H42 V50 H40 Z" />
<path d="M50,10 H52 V50 H50 Z" />
</g>
</svg>在 Chrome 中生成這樣的影像（放大所以很明顯）：
頂部
底部
請注意，線條的邊緣和矩形的角是稍淺的紅色。
這看起來像是抗鋸齒，但在
底部
有沒有辦法以某種方式解決這個問題，所以我在指定的坐標范圍內得到相同的線條顏色？
uj5u.com熱心網友回復：
在 Win64 Chrome 上，我只看到前兩個元素的抗鋸齒。
線元素的解釋很簡單。因為您要向下平移半個像素，所以兩條線的末端在向上/向下一個像素的一半處結束。因此，在這種情況下您將獲得抗鋸齒。調整坐標，或添加stroke-linecap="square"來修復它。
插圖：
顯示代碼片段
<svg viewBox="0 0 70 40" width="420">
<g transform="translate(10,10)">
<g fill="none" stroke="#ccc" id="grid">
<rect width="10" height="10"/>
<rect x="10" width="10" height="10"/>
<rect y="10" width="10" height="10"/>
<rect x="10" y="10" width="10" height="10"/>
</g>
<!-- line (as is) -->
<line x1="5" y1="20" x2="5" y2="5" stroke="#00c8" stroke-width="10"/>
<line x1="5" y1="20" x2="5" y2="5" stroke="red" stroke-width="1"/>
</g>
<g transform="translate(40,10)">
<use xlink:href="#grid"/>
<!-- rectamngle corner -->
<path d="M 5,20 L 5,5 L 20,5" fill="none" stroke="#00c8" stroke-width="10"/>
<path d="M 5,20 L 5,5 L 20,5" fill="none" stroke="red" stroke-width="1"/>
</g>
</svg>至于零寬度矩形。不知道那里發生了什么。它只是稍微輕一點。這可能是 Skia 中的渲染錯誤。它可能只會影響 Skia 的 GPU 渲染器（我沒有檢查）。GPU 渲染器在這些邊緣情況下比 CPU 渲染路徑有更多的渲染錯誤。如果你在乎，你可以提交一個關于它的錯誤。
<svg width=100 height=100>
<g transform="translate(0.5, 0.5)" stroke=red fill=none>
<line x1=10 y1=10 x2=10 y2=50 stroke-linecap="square"/>
<path d="M20,10 H20 V50 H20 Z" />
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/482081.html
標籤：svg