文字即将消失<svg><rect> 1000 倍的盒子一次，但在 safari 浏览器上总是重现这个错误

Question

Im trying to fix this bug, and I have tried alot things but nothing help, if I give value of x='23%' like <text id="badgeText" x = "23% ... I can fix bug on safari but than bug start repodruce everytime on other browsers(mozila,chrome etc...), anyhow the bug is reproducing once in many times on other browsers ...

bug image

<div class="CoveoShowIfFieldValue"  data-field="@isRecommended" data-field-value="True">
<svg height="25px" style="overflow:visible!important;">
    <g id="recommendedBadge" style="object-fit:contain!important;">
        <rect x="0" y="0" rx="15px" ry="15px"/>
        <text id="badgeText" y="66%" font-family="Metric" text-anchor="middle" class="CoveoText" data-value="RECOMMENDED" style="text-transform: uppercase;"></text>
        <g class="tooltip" transform="translate(21,62)">
            <rect x="-6%" width="450" y="-35" height="25" rx="5px" ry="5px"/>
            <text y="-31" dy="1em" font-family="Metric" text-anchor="middle" font-weight="100" class="CoveoText" data-value="RecommendedTooltip"></text>
        </g>
    </g>
</svg> </div>

Answer 1

It's not a bug:
You need to add some width related properties like width or a viewBox .

Otherwise a browser can't tell how to render a relative unit within a svg element.

Some browsers might be more forgiving by guessing or setting default width values as fallbacks. (Currently most firefox and chromium based browsers use 300px as a fallback).

 <style> svg { border: 1px solid red; height: 25px; } text { fill: #fff; } </style> <h2>Use viewBox</h2> <svg viewBox="0 0 450 25" style="overflow:visible!important;"> <g id="recommendedBadge"> <rect x="0" y="0" rx="15" ry="15" width="100%" height="25" /> <text id="badgeText" x="50%" y="50%" dy="2" dominant-baseline="middle" font-family="Metric" text-anchor="middle" class="CoveoText" data-value="RECOMMENDED" style="text-transform: uppercase;"> Badge Text </text> <g class="tooltip" transform="translate(0 25)"> <rect x="0" y="0" width="100%" height="100%" rx="5" ry="5" fill="red" /> <text x="50%" y="50%" dy="5" font-family="Metric" text-anchor="middle" font-weight="100" class="CoveoText" data-value="RecommendedTooltip">tooltip</text> </g> </g> </svg> <br><br><br> <h2>Use width</h2> <svg height="25" width="100%" style="overflow:visible!important;"> <g id="recommendedBadge"> <rect x="0" y="0" rx="15" ry="15" width="100%" height="25" /> <text id="badgeText" x="50%" y="50%" dy="2" dominant-baseline="middle" font-family="Metric" text-anchor="middle" class="CoveoText" data-value="RECOMMENDED" style="text-transform: uppercase;"> Badge Text </text> <g class="tooltip" transform="translate(0 25)"> <rect x="0" y="0" width="100%" height="100%" rx="5" ry="5" fill="red" /> <text x="50%" y="50%" dy="5" font-family="Metric" text-anchor="middle" font-weight="100" class="CoveoText" data-value="RecommendedTooltip">tooltip</text> </g> </g> </svg>