Bootstrap 5项目SVG星级评分RTL方向不切换的修复问询

问题根源 #

当前SVG星级基于LTR逻辑设计：

• 星星从左到右排列
• 半星的填充区域为左侧部分
  切换至RTL模式后，页面整体方向反转，但SVG内部元素未同步调整，导致显示逻辑与阅读习惯不符。

修复方案 #

1. 快速CSS适配方案 #

利用Bootstrap 5原生的[dir="rtl"]选择器，添加专属样式调整布局：

/* 让星级容器遵循RTL方向排列 */
[dir="rtl"] .rating {
  direction: rtl;
}

/* 翻转半星，使其填充区域对应RTL下的右侧 */
[dir="rtl"] .rating use[href="#stars-half-star"] {
  transform: scaleX(-1);
}

该方案无需修改SVG结构，通过CSS快速适配RTL逻辑：

• 调整.rating容器方向，让星星从右往左排列
• 水平翻转半星符号，使填充区域变为右侧，匹配RTL评分展示习惯

2. 原生SVG符号优化方案（可选） #

若需避免依赖CSS变换，可新增RTL专属半星符号：

<svg id="stars" style="display: none;" version="1.1">
  <!-- 保留原有LTR符号 -->
  <symbol id="stars-empty-star" viewBox="0 0 102 18" fill="#F1E8CA">
    <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218" />
  </symbol>
  <symbol id="stars-full-star" viewBox="0 0 102 18" fill="#D3A81E">
    <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218" />
  </symbol>
  <symbol id="stars-half-star" viewBox="0 0 102 18" fill="#D3A81E">
    <use xlink:href="#stars-empty-star" />
    <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792" />
  </symbol>
  <!-- 新增RTL半星符号 -->
  <symbol id="stars-half-star-rtl" viewBox="0 0 102 18" fill="#D3A81E">
    <use xlink:href="#stars-empty-star" />
    <path d="M9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218L9.5 14.25" />
  </symbol>
</svg>

在RTL模式下使用该符号，以0.5评分为例：

<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-empty-star" />
  <use xlink:href="#stars-empty-star" />
  <use xlink:href="#stars-empty-star" />
  <use xlink:href="#stars-empty-star" />
  <use xlink:href="#stars-half-star-rtl" />
</svg>

3. 配合Bootstrap RTL工具类 #

结合Bootstrap 5的.text-end类，确保星级容器对齐方式符合RTL规范：

<div class="text-end">
  <svg aria-hidden="true" focusable="false" class="rating">
    <!-- 星级内容 -->
  </svg>
</div>

验证要点 #

切换页面dir属性为rtl后，检查：

• 星级排列方向是否为从右往左
• 半星填充区域是否对应右侧
• 所有评分等级的显示逻辑是否符合RTL阅读习惯

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