如何将卡片body内的SVG移动到对侧并翻转，调整时仅轻微上移或消失

要实现SVG移到卡片另一侧并水平翻转适配排版，只需修改SVG外层容器的样式即可，不需要改动SVG本身的路径、视口属性，避免出现移位或消失的问题。你之前调整出现异常，大多是因为改动了SVG的viewBox、宽高属性，或者用了translate位移没有计算准确元素尺寸，用以下方案不会出现同类问题。

实现步骤 #

• 给包裹SVG的.svg-icon容器添加右对齐属性，让SVG移到卡片右侧
• 给容器添加transform: scaleX(-1)属性实现水平翻转，该属性基于元素自身中心变换，不会改变元素占位大小，不会出现偏移问题

参考代码（基于原有代码修改） #

<div class="row featurette" id="ourMission">
  <div class="col-md-7">
        <div class="card">
          <div class="card-body">
            <!-- 新增样式，也可以把样式写到单独的CSS文件中统一管理 -->
       <span class="svg-icon text-primary mb-3" style="display:block;text-align:right;transform:scaleX(-1);">
              <svg width="300" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                  
              <path  d="M13.5001 5.84998C9.0001 7.64998 5.4001 12.15 5.4001 16.2C5.4001 17.1 5.4001 18 5.8501 18.45C6.7501 17.55 8.1001 17.1 9.9001 17.1C13.5001 17.1 16.6501 19.8 16.6501 23.85C16.6501 27.9 13.5001 30.6 9.9001 30.6C6.3001 31.05 4.5001 29.7 3.1501 27.45C1.8001 25.2 1.3501 22.05 1.3501 20.25C1.3501 13.05 4.9501 7.19998 12.6001 3.59998L13.5001 5.84998ZM31.9501 5.84998C27.4501 7.64998 23.8501 12.15 23.8501 16.2C23.8501 17.1 23.8501 18 24.3001 18.45C25.2001 17.55 26.5501 17.1 28.3501 17.1C31.9501 17.1 35.1001 19.8 35.1001 23.85C35.1001 27.9 31.9501 30.6 28.3501 30.6C25.2001 30.6 23.4001 29.25 22.0501 27C19.8001 25.2 19.8001 22.05 19.8001 20.25C19.8001 13.05 23.4001 7.19998 31.0501 3.59998L31.9501 5.84998Z" fill="#377dff"/>
              </svg>

            </span>


            <!-- Blockquote -->
            <figure>
              <blockquote class="blockquote blockquote-sm">
                  <!--IN The size-->

如果你用的是Bootstrap框架，也可以直接用内置类实现，不需要写内联样式：给span添加d-block text-end类实现右对齐，再新增一个自定义类写翻转样式即可。

当前实现效果 #

内容的提问来源于stack exchange，提问作者Dr5056732