CODEWITHSUNDEEP
javascripthtmlcsssvgrect
Nikola
Nikola

Reputation: 1

text is going out of <svg><rect> box once in 1000x times but on safari browser always reproduce this bug

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>

Upvotes: 0

Views: 301

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17293

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>

Upvotes: 1

Related Questions