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); 
} 

これを行うと、まだ画面の左側から移動します。画面の右側を基準にして変換する方法はありますか？

js私の問題を記述するhere！

Answer 1

あなたはCSS translate（またはtranslateXまたはtranslateY）を使用する場合は、あなたが画面の端に要素の相対を翻訳しませんが、要素は、画面上になる場所への相対は、それが翻訳されていませんでした。

SVG rectを画面の右側から左に移動する場合は、まず画面の右端に近い場所にSVGを配置する必要があります。

1. がviewBoxはそうあなたがviewBox
の widthから要素の widthを引き
2. で動作するように、親の幅を持っている<svg>要素を与える：にこれを行うには

   一つの方法はあるかもしれません

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>