Question

我有一个包含几组元素的SVG，一个图像分组在其周围有<text>个节点。

我正在使用jQuery clone()并添加rotate(a)此组，以便路径在形状周围多次出现。当我旋转整个组时，文本方向随旋转角度而变化。我可以选择绘制单独的路径，但是如果我想对路径的形状进行更改，我需要传播这些更改，包括重新计算坐标等。

相反，我希望文本在旋转图像中处于相同的相对位置，但是垂直定向。

我可以将<g>或<text>属性设置为从左到右绝对确定文字方向吗？如果没有，那么有更好的方法来获得我想要的最终结果吗？

//Just in case this isn't blatantly obvious, this is just a mock up.  You may correct any syntax errors you find, but they are NOT the source of any trouble.
var svg = $('#container');
var group = $(document.createElementNS(svgns,'g'));

group.attr('id','groupA');
var path = $(document.createElementNS(svgns,'path');
path.attr('d', 'M40 40 A9,2 0 0,1 100 40'); //A simple arc
group.append(path);

var text = $(document.createElementNS(svgns,'text') ;
text.attr('class','someclass');
group.append(text);

svg.append(group);
group=group.clone();
group.attr('id','groupB');
group.attr('transform','rotate(90, 100, 100)'); //rotates both path and text around the center of image.  I'd rather keep text upright, although I want it in the same relative position
svg.append(group)

Answer 1

首先，您应该只旋转图像，而不是包含文本和图像的组。

其次，使用here中的getBBoxInElementSpace和getBoundingBoxInArbitrarySpace函数，使用以下调用获取旋转图像的边界框：

var imageBBox = getBBoxInElementSpace(text,image);

然后按如下方式更新文本位置：

text.x.baseVal.getItem(0).value = imageBBox.x;
text.y.baseVal.getItem(0).value = imageBBox.y;

如何在SVG中绝对定位文本

1 个答案: