为什么使用 @svg 指令时屏幕阅读器会读取 SVG 的样式 (Laravel)

Question

我在 Laravel 中使用 @svg() 指令时遇到了一个 SVG 问题。

以下是我如何包含 svg @svg('trustpilot/5- rating')。

这是我包含的 SVG 文件。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 37.5">
<defs>
    <style>.tp5-1{fill:#00b67a;}.tp5-2{fill:#fff;}</style>
</defs>
<title>Asset 4</title>
<g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
        <rect class="tp5-1" width="37.5" height="37.5"/>
        <rect class="tp5-1" x="40.63" width="37.5" height="37.5"/>
        <rect class="tp5-1" x="81.25" width="37.5" height="37.5"/>
        <rect class="tp5-1" x="121.88" width="37.5" height="37.5"/>
        <rect class="tp5-1" x="162.5" width="37.5" height="37.5"/>
        <path class="tp5-2" d="M18.75,25.27l5.7-1.44,2.39,7.34Zm13.12-9.49h-10L18.75,6.33l-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.13-5.86,5-3.59,8.08-5.86Z"/>
        <path class="tp5-2" d="M59.38,25.27l5.7-1.44,2.38,7.34ZM72.5,15.78h-10L59.38,6.33l-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.12-5.86,5-3.59,8.09-5.86Z"/>
        <path class="tp5-2" d="M100,25.27l5.7-1.44,2.39,7.34Zm13.13-9.49h-10L100,6.33l-3.09,9.45h-10L95,21.64l-3.09,9.45L100,25.23l5-3.59,8.09-5.86Z"/>
        <path class="tp5-2" d="M140.62,25.27l5.71-1.44,2.38,7.34Zm13.13-9.49h-10l-3.09-9.45-3.08,9.45h-10l8.12,5.86-3.08,9.45,8.12-5.86,5-3.59,8.09-5.86Z"/>
        <path class="tp5-2" d="M181.25,25.27l5.7-1.44,2.39,7.34Zm13.13-9.49h-10l-3.09-9.45-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.13-5.86,5-3.59,8.09-5.86Z"/>
    </g>
</g>

我遇到的问题是，屏幕阅读器正在读出 defs 和 style 标签中的内容。就这样…… .tp5-1{..... ect,ect...

我做了一些研究，发现我可以将一些参数传递给 @svg() 指令，例如名称、类和其他参数。

或者您还有其他建议吗？我认为 SVG 中有一个 title 标签，屏幕阅读器实际上会使用它，但我似乎错了。

Answer 1

它说你应该发送选项，你可以

['class' => 'some class']

在你的 @svg 指令中创建类似的东西作为 2. 参数。

在这里您可以阅读更多内容。

另外你的 svg 应该是这样的：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 37.5">
    <defs>
        <style>.tp5-1{fill:#00b67a;}.tp5-2{fill:#fff;}</style>
    </defs>
    <title>Asset 4</title>
    <g id="Layer_2" data-name="Layer 2">
        <g id="Layer_1-2" data-name="Layer 1">
            <rect class="tp5-1" width="37.5" height="37.5"/>
            <rect class="tp5-1" x="40.63" width="37.5" height="37.5"/>
            <rect class="tp5-1" x="81.25" width="37.5" height="37.5"/>
            <rect class="tp5-1" x="121.88" width="37.5" height="37.5"/>
            <rect class="tp5-1" x="162.5" width="37.5" height="37.5"/>
            <path class="tp5-2" d="M18.75,25.27l5.7-1.44,2.39,7.34Zm13.12-9.49h-10L18.75,6.33l-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.13-5.86,5-3.59,8.08-5.86Z"/>
            <path class="tp5-2" d="M59.38,25.27l5.7-1.44,2.38,7.34ZM72.5,15.78h-10L59.38,6.33l-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.12-5.86,5-3.59,8.09-5.86Z"/>
            <path class="tp5-2" d="M100,25.27l5.7-1.44,2.39,7.34Zm13.13-9.49h-10L100,6.33l-3.09,9.45h-10L95,21.64l-3.09,9.45L100,25.23l5-3.59,8.09-5.86Z"/>
            <path class="tp5-2" d="M140.62,25.27l5.71-1.44,2.38,7.34Zm13.13-9.49h-10l-3.09-9.45-3.08,9.45h-10l8.12,5.86-3.08,9.45,8.12-5.86,5-3.59,8.09-5.86Z"/>
            <path class="tp5-2" d="M181.25,25.27l5.7-1.44,2.39,7.34Zm13.13-9.49h-10l-3.09-9.45-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.13-5.86,5-3.59,8.09-5.86Z"/>
        </g>
    </g>
</svg>

Answer 2

感谢您的帮助。我已经通过给样式标签赋予一个area-hidden=true参数来解决这个问题，这似乎已经解决了这个问题。

它看起来像这样：

<style area-hidden="true">.tp5-1{fill:#00b67a;}.tp5-2{fill:#fff;}</style>