翻译相对于屏幕右侧的SVG元素？

Question

是否可以相对于屏幕右侧转换SVG元素而不是默认情况下的左上角？

<svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <text id="text" class="svgText">test text test text</text>
  <rect id="border" class="textOutlineBox" x="0" y="0" width="440.5" height="90"/>  
</svg>

#text, #border {
  transform-origin: right center;
}

#text {
  transform: translate(15vw, 20vh);
}

#border {
  transform: translate(10vw, 10vh);
}

当我这样做时，它仍然从屏幕左侧移动。有没有办法让它相对于屏幕右侧进行转换？

jsFiddle描述我的问题here！

Answer 1

当您使用CSS FST（或translate或translateX）时，您不会相对于屏幕边缘转换元素，而是相对于元素的位置在屏幕上，它没有翻译。

因此，如果您想从屏幕右侧向左移动SVG translateY，首先需要将其放置在靠近屏幕右边缘的位置。

这样做的一种方法可能是：

1. 将rect元素设为<svg>，以便您有父母宽度可以使用
2. 从viewBox
的width中减去元素的width
3. 应用2.中的值作为元素的viewBox值。

现在，当x朝着屏幕的右边缘移动时，您可以将其向左翻译，给它一个负rect值。

工作示例：

translateX

body {
margin: 0;
}

svg {
width: 99vw;
border: 1px solid gray;
}

#border {
transform: translate(-10vw, 10vh);
}