Html SVG中的右浮动图像

我希望实现这种外观：

• 圆圈元素是SVG元素中的图像元素

• 我在用电话

• 我试过调整图像元素右边的边距、填充和浮动，但都没用

             <svg class="bd-placeholder-img card-img-top" width="100%" xmlns="http://www.w3.org/2000/svg"
           preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail">
           <title>BROKENBLADE</title>
           <rect width="100%" height="100%" fill="#222" />
           <image class="profile-img" href="https://s3.amazonaws.com/solomid-resources/tsm-gg/newtsmgg/players/brokenbladelarge.png
             "></image>
           <image class="role-icon" href="https://vignette.wikia.nocookie.net/leagueoflegends/images/e/ef/Top_icon.png/revision/latest/scale-to-width-down/50?cb=20181117143602
           "></image>
  

  
  断片
  

这是我的代码：

谢谢你的阅读

当您看起来正在使用时，您可以通过将以下内容添加到CSS中来实现此效果：

svg>image.role-icon{
x:100%；
转换：转换（-50px，0px）；
-ms转换：转换（-50px，0px）；/*IE 9*/
-webkit转换：翻译（-50px，0px）；/*Safari和Chrome*/
-o变换：平移（-50px，0px）；/*Opera*/
-moz转换：转换（-50px，0px）；/*Firefox*/
}