html - 在 SVG 中浮动右图像

Question

我想实现这样的外观：

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

• 我正在使用Bootstrap 4 专辑示例

• 我尝试调整图像元素的边距、填充和浮动：右，但无济于事。

             <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>
  

这是我的代码：https ://codepen.io/sneaky9/pen/PozodRq

谢谢阅读！

标签： htmlcss

Answer 1

由于您似乎正在使用SVG2，您可以通过将其添加到您的 CSS 来实现该效果：

svg > image.role-icon {
  x:100%;
  transform: translate(-50px,0px);
  -ms-transform: translate(-50px,0px); /* IE 9 */
  -webkit-transform: translate(-50px,0px); /* Safari and Chrome */
  -o-transform: translate(-50px,0px); /* Opera */
  -moz-transform: translate(-50px,0px); /* Firefox */
}