Estoy tratando de corregir este error, y he intentado muchas cosas pero nada de ayuda, si doy un valor de x = '23%' como <text id="badgeText" x = "23% ... Puedo corregir el error en safari pero el error comienza a repetirse cada vez en otros navegadores (mozila, chrome, etc.), de todos modos, el error se reproduce una vez cada muchas veces en otros navegadores ...
<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>No es un error:
Debe agregar algunas propiedades relacionadas con el ancho, como width o viewBox .
De lo contrario, un navegador no puede saber cómo representar una unidad relativa dentro de un elemento svg.
Algunos navegadores pueden ser más indulgentes al adivinar o establecer valores de ancho predeterminados como respaldo. (Actualmente, la mayoría de los navegadores basados en Firefox y Chrome usan 300 px como respaldo).
<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>