如何使用svg.js设置元素相对底部/右侧位置？SVG底部0px文本定位求助

一、设置元素相对于底部或右侧的位置 #

svg.js本身没提供right()或bottom()这类直接的快捷方法，但咱们可以通过计算容器尺寸与元素尺寸的差值来实现相对定位：

1. 先拿到SVG容器的当前宽高：

   const svg = SVG().addTo('body').size(400, 300);
   const svgWidth = svg.width();
   const svgHeight = svg.height();
   

2. 拿矩形举例，要让它距离右侧20px、底部30px的话：

   const rect = svg.rect(100, 80);
   // 右侧定位：容器宽度 - 元素宽度 - 右侧间距
   rect.x(svgWidth - rect.width() - 20);
   // 底部定位：容器高度 - 元素高度 - 底部间距
   rect.y(svgHeight - rect.height() - 30);
   

要是你的SVG用了viewBox，记得用viewBox()获取视口尺寸，别用容器的像素尺寸：

const [viewX, viewY, viewWidth, viewHeight] = svg.viewBox();
rect.x(viewWidth - rect.width() - 20);

如果容器尺寸会动态变化，比如窗口resize的情况，可以加个监听事件，每次尺寸变了重新计算位置就行。

二、在SVG底部添加零间距文本 #

这个坑我刚踩过！默认情况下SVG文本的坐标是基于字母基线的，不是文本的底部，所以直接把y设为容器高度，文本会看起来“悬浮”在底部上方，甚至部分内容会超出容器。解决的关键就是调整文本的基线属性：

1. 创建文本的时候设置基线对齐：

   const svg = SVG().addTo('body').size(400, 300);
   const bottomText = svg.text('我是底部零间距文本')
     .attr('dominant-baseline', 'bottom') // 让文本的底部对齐设置的y坐标
     .y(svg.height()); // y值直接设为SVG容器的高度
   

2. 要是需要文本水平居中的话，再加个text-anchor属性：

   bottomText.attr('text-anchor', 'middle')
     .x(svg.width() / 2);
   

如果碰到某些浏览器兼容性问题，也可以用getBBox()获取文本的精确边界框，手动计算y值：

const textBBox = bottomText.node().getBBox();
bottomText.y(svg.height() - textBBox.y - textBBox.height);

这样就能完美实现文本和SVG底部间距为0的效果了。

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