关于SVG中无额外JS实现计算坐标及边界相对坐标不随缩放变化的技术问询

我想请教一下，在SVG里能不能定义一种不随缩放变化的、相对于边界的坐标？举个例子，我有一个方形，内部还有一条路径，路径上的点坐标应该是(w-1, h-1)（注：这里实际应该是x2,y2），不管整体怎么缩放都要保持这个相对关系。比如如果方形的范围是(0,0)到(10,10)，这个点就该在(9,9)；如果方形范围变成(2,2)到(20,20)，这个点就该在(19,19)。有没有办法在SVG里实现这种需求？

[示例示意图：展示包含外部方形与内部路径的SVG效果]

没问题！这种相对边界的坐标需求完全可以用SVG原生特性实现，不用额外写JavaScript，给你几个实用的方案：

• 用CSS变量+calc()动态计算坐标
  这是最灵活的方案，适合需要动态调整方形位置和大小的场景：

  1. 先在SVG的样式里定义变量，比如：

     :root {
       --box-x: 0;
       --box-y: 0;
       --box-width: 10;
       --box-height: 10;
     }
     

  2. 然后在路径的坐标里直接使用calc()计算相对位置：

     <rect x="var(--box-x)" y="var(--box-y)" width="var(--box-width)" height="var(--box-height)" />
     <path d="Mvar(--box-x),var(--box-y) Lcalc(var(--box-x) + var(--box-width) - 1),calc(var(--box-y) + var(--box-height) - 1)" />
     

  不管你怎么修改--box-x、--box-width这些变量，路径的终点都会自动保持距离方形右下角1个单位的位置，缩放时只要同步调整变量比例就行。

• 用相对路径命令（小写字母）
  如果你的方形起点固定，或者路径是基于方形起点绘制的，可以用SVG路径的相对命令：
  比如方形的路径是M0,0 L10,0 L10,10 L0,10 Z，那内部路径可以写成M0,0 l9,9（小写l表示相对当前点移动），这样不管方形整体被平移或缩放，内部路径的终点始终距离起点(0,0)9个单位，也就是距离方形右下角1个单位。如果方形的起点不是(0,0)，只要把内部路径的起点和方形起点保持一致，相对命令依然有效。

• 用viewBox固定相对坐标系
  如果你希望整个SVG的缩放只改变显示大小，不改变内部相对关系，可以给SVG根元素设置viewBox：
  比如设置viewBox="0 0 10 10"，这样SVG内部的1个单位就对应viewBox的1份，然后内部点直接写9,9。当你需要调整方形范围时，只需要同步修改viewBox的参数，比如要对应(2,2)到(20,20)的范围，就把viewBox改成2 2 18 18，此时内部点的相对位置会自动适配，始终距离边界1个单位。

备注：内容来源于stack exchange，提问作者rhavin