這個問題在這里已經有了答案：
![svg 是否在 viewbox 之外計算？[復制]](https://img.uj5u.com/2021/11/20/40b9c06f7e394e74a89857654afddab5.png)
為了使兩個圖形都在 svg 畫布內，您需要計算 viewBox 的引數。
為此，將兩個形狀都放在 group 標簽中<g>并計算 viewBox 的引數
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="300" viewBox="0 0 600 300" style="border:1px solid" >
<g id="group">
<rect x="20" y="50" width="200" height="200" rx="5%" fill="purple" />
<!-- Circle cx = "800" outside viewBox = "0 0 600 300" -->
<circle cx="800" cy="150" r="140" fill="greenyellow" />
</g>
</svg>
<script>
console.log(group.getBBox())
</script>設定計算的 viewBox 屬性
它是： viewBox="0 0 600 300"
現在： viewBox = "20 10 920 280"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="300" viewBox="20 10 920 280" style="border:1px solid" >
<g id="group">
<rect x="20" y="50" width="200" height="200" rx="5%" fill="purple" />
<!-- Circle cx = "800" inside viewBox = "0 0 920 280" -->
<circle cx="800" cy="150" r="140" fill="greenyellow" />
</g>
</svg> 轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/361062.html