相对于屏幕右侧翻译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 translate（或translateX或translateY），你不要在相对于屏幕的边缘元素翻译，但是相对于其中元素会在屏幕上，如果不是翻译。

所以如果你想从屏幕右边向左移动一个SVG rect，你首先需要把它放在靠近屏幕右边的某个地方。要做到这一点

的一种方式可能是：

1. 给这个<svg>元素的viewBox让你有一个家长宽度与
2. 工作从viewBox
的 width减去元素的 width
3. 将值2应用为元素的x值。

现在，rect朝向屏幕的右侧边缘，可以通过给它一个负值translateX值将它翻译为向左。

工作实施例：

body { 
 
margin: 0; 
 
} 
 

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

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 200"> 
 
<rect id="border" x="559.5" y="0" width="440.5" height="90" /> 
 
</svg>