为什么 screen-reader 在使用 @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>

我遇到的问题是，屏幕 reader 正在读取我在 defs 和 style 中的内容标签。所以它去... .tp5-1{.....等，等...

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

或者您还有其他建议吗？我以为我们在 SVG 中有一个 title 标签，实际上会被屏幕使用 reader 但我似乎错了。

Answer 1

它说你应该发送选项，你可以做类似的东西

['class' => 'some class']

在你的@svg 指令中作为 2. 参数。

here你可以阅读更多。

另外你的 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>

为什么 screen-reader 在使用 @svg 指令时读取 SVG 的样式 (Laravel)

Why the screen-reader reads the styling of an SVG, when @svg directive is used (Laravel)

svg

screen-readers

laravel