如何在Laravel中使用Markdown在邮件中展示评分

问题描述 #

在Laravel框架中使用Markdown发送邮件时，由于Markdown原生不支持SVG，目前只能用表情符号（如⭐⭐⭐☆☆这类黑白/彩色表情）展示评分，但希望实现更美观的星级评分效果。另外，以下这段SVG代码是否可用于该场景？

<div style="display: flex; align-items: center;">

    @php
        $rating = $review ? $review->rating : 0;
        $emptyStars = 5 - $rating;
    @endphp

    @for ($i = 1; $i <= 5; $i++)
        <svg class="star" style="width: 16px; height: 16px; fill: {{ $i <= $rating ? 'yellow' : 'transparent' }}"
            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
            <path
                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
        </svg>
    @endfor
</div>

解决方案 #

这段SVG代码完全可以用于Laravel Markdown邮件场景，但需要做一些适配优化，确保在主流邮件客户端中正常显示：

1. 直接嵌入并优化样式 #

Laravel的Markdown邮件允许混合HTML/Blade代码，你可以直接将这段代码放到自定义的Markdown邮件视图中（比如resources/views/mail/your-template.blade.php），同时做以下优化：

• 将fill属性中的transparent改为浅灰色（如#e0e0e0），避免空星在部分客户端中显示不清晰；
• 把yellow替换为更柔和的星级黄色（如#ffc107），提升视觉效果；
• 保留内联样式，不要用外部CSS类，因为绝大多数邮件客户端不支持外部样式表。

优化后的代码示例：

<div style="display: flex; align-items: center;">
    @php
        $rating = $review ? $review->rating : 0;
    @endphp
    @for ($i = 1; $i <= 5; $i++)
        <svg style="width: 16px; height: 16px; margin-right: 2px; fill: {{ $i <= $rating ? '#ffc107' : '#e0e0e0' }}"
             aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
            <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
        </svg>
    @endfor
    <!-- 可选：添加屏幕阅读器友好的文本评分 -->
    <span style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;">
        {{ $rating }}/5 星
    </span>
</div>

2. 兼容性降级方案 #

如果需要兼容老旧邮件客户端（如部分版本的Outlook桌面端），可以添加表情符号作为降级选项：

<div style="display: flex; align-items: center;">
    @php
        $rating = $review ? $review->rating : 0;
        $emptyCount = 5 - $rating;
    @endphp
    <!-- SVG 优先显示 -->
    <span style="display: inline-block;">
        @for ($i = 1; $i <= 5; $i++)
            <svg style="width: 16px; height: 16px; margin-right: 2px; fill: {{ $i <= $rating ? '#ffc107' : '#e0e0e0' }}"
                 aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
                <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
            </svg>
        @endfor
    </span>
    <!-- 降级用表情符号，仅在不支持SVG时显示 -->
    <!--[if mso]>
    <span style="font-size: 16px;">
        @for ($i = 1; $i <= $rating; $i++)⭐@endfor
        @for ($i = 1; $i <= $emptyCount; $i++)☆@endfor
    </span>
    <![endif]-->
</div>

3. 注意事项 #

• 主流邮件客户端（Gmail、Outlook 365、Apple Mail、Yahoo Mail）都支持内嵌SVG，无需过度担心兼容性；
• 测试邮件显示效果时，建议使用Laravel的邮件预览功能，或者借助邮件测试工具查看不同客户端的渲染结果。

内容的提问来源于stack exchange，提问作者Dev Kumar Verma