SVG.js绘制负坐标线条异常：仅渲染至原点问题排查

问题 #

我尝试将SVG缩小至0.5倍比例后，绘制从正坐标到负坐标的线条，但发现线条仅渲染至x:0和y:0位置。请问SVG.js不支持负坐标绘制，还是我的代码存在问题？

我的代码如下：

const designerDiv = document.getElementById('designerDiv')
var draw = SVG().addTo(designerDiv).attr({width: '100%', height: '100%'})

draw.rect(100, 100).attr({ fill: '#f06' })

draw.scale(0.5, 0.5, 0, 0)

draw.line(-100, -100, 100, 100).stroke({ width: 3, color: '#000' })
draw.line(-100, 100, 100, -100).stroke({ width: 3, color: '#000' })

实际效果：两条交叉线仅显示(0,0)到正坐标的部分，负坐标区域的线条被裁剪，无法看到。

问题原因 #

不是SVG.js不支持负坐标绘制，是代码逻辑顺序和视口设置的问题：

• 你先对整个SVG容器执行了缩放操作，之后绘制的线条虽然包含负坐标，但SVG默认视口仅覆盖(0,0)到容器宽高的区域，负坐标部分超出视口范围，被自动裁剪了。
• 缩放操作作用于容器本身，后续元素继承缩放，但视口没有同步调整以包含负坐标区域，导致这部分内容无法渲染。

解决方案 #

有两种可行的处理方式：

方式一：先绘制元素，再整体缩放 #

调整代码顺序，先完成所有图形的绘制，再对整个SVG容器执行缩放。这样所有元素（包括负坐标部分）都会被正确缩放并纳入视口：

const designerDiv = document.getElementById('designerDiv')
var draw = SVG().addTo(designerDiv).attr({width: '100%', height: '100%'})

// 先绘制所有图形
draw.rect(100, 100).attr({ fill: '#f06' })
draw.line(-100, -100, 100, 100).stroke({ width: 3, color: '#000' })
draw.line(-100, 100, 100, -100).stroke({ width: 3, color: '#000' })

// 最后执行缩放
draw.scale(0.5, 0.5, 0, 0)

方式二：调整SVG视口范围，包含负坐标区域 #

通过设置viewBox属性，将SVG的视口范围扩大到能覆盖负坐标区域，确保所有图形都能被渲染：

const designerDiv = document.getElementById('designerDiv')
// 设置viewBox：前两个值是视口左上角坐标，后两个是视口宽高
var draw = SVG().addTo(designerDiv).attr({
  width: '100%', 
  height: '100%',
  viewBox: '-100 -100 200 200'
})

draw.rect(100, 100).attr({ fill: '#f06' })
draw.scale(0.5, 0.5, 0, 0)
draw.line(-100, -100, 100, 100).stroke({ width: 3, color: '#000' })
draw.line(-100, 100, 100, -100).stroke({ width: 3, color: '#000' })

内容的提问来源于stack exchange，提问作者Stefan Walter