為什么螢屏閱讀器在使用@svg指令時讀取SVG的樣式（Laravel）

我在使用 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和樣式標簽中的內容。所以它去...... .tp5-1 {......等等......

我做了一些研究，發現我可以將一些引數傳遞給@svg() 指令，例如名稱、類和其他引數。

或者你有什么其他建議嗎？我以為我們在 SVG 中有一個標題標簽，螢屏閱讀器實際上會使用它，但我似乎錯了。

uj5u.com熱心網友回復：

它說你應該發送選項，你可以做類似的東西

['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>

uj5u.com熱心網友回復：

謝謝您的幫助。我已經通過給樣式標簽一個 area-hidden=true 的引數來解決這個問題，這似乎已經解決了這個問題。

它看起來像這樣：

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

標籤：拉拉维尔 svg 屏幕阅读器

上一篇：如何將多個徑向漸變合并到單個SVGAlpha蒙版上？

下一篇：SVG文本元素的長度計算差異