CODEWITHSUNDEEP
htmlcssgoogle-chromesvg
didil
didil

Reputation: 715

Why Google Chrome fails to properly display text tag in SVG?

I have a SVG to display a washing machine icon with a text. The text is a number displayed in a green hexagon.

Unfortunately, Google Chrome cannot display the text when all the other browsers I tested can (Firefox and Microsoft Edge).

The font is not available in this snippet but it has no impact on the related issue.

svg.machine {
  height: 300px;
  max-width: 100%;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  image-rendering: auto;
  fill-rule: evenodd;
  clip-rule: evenodd; }
  svg.machine .machine {
    display: block; }
    svg.machine .machine .label {
      fill: #727272;
      font-family: 'Open Sans Condensed', sans-serif;
      font-weight: 300;
      font-size: 75000px;
      text-align: center;
      text-anchor: middle;
      letter-spacing: -1px; }
    svg.machine .machine .mask {
      fill: white; }
    svg.machine .machine .draw {
      fill: #727272; }
  svg.machine .timer-up {
    display: none; }
    svg.machine .timer-up .bg {
      fill: #CD2628; }
    svg.machine .timer-up .icon {
      fill: white; }
    svg.machine .timer-up .timer {
      fill: #CD2628;
      font-family: 'Open Sans Condensed', sans-serif;
      font-weight: 300;
      font-size: 60000px;
      text-align: left;
      text-anchor: start;
      line-height: 1em;
      letter-spacing: -1px; }
    svg.machine .number polygon {
      fill: #00a627;
      stroke: #fff;
      stroke-width: 4000;
      stroke-linejoin: round; }
    svg.machine .number text {
      fill: white;
      font-weight: bold;
      font-weight: 700;
      font-size: 110000px;
      font-family: 'Open Sans', sans-serif;
      text-align: center;
      text-anchor: start; }
<svg class="machine" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500000 800000">
  <defs><linearGradient id="shadowgrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0" style="stop-opacity:0; stop-color:black"></stop><stop offset="1" style="stop-opacity:0.35; stop-color:black"></stop></linearGradient></defs>
  <g class="machine">
    <text class="label" x="250000" y="780000">Washing</text>
    <polygon class="shadow" fill="url(#shadowgrad)" points="381195,596338 500001,596338 447930,686527 381095,686794"></polygon>
    <polygon class="mask" points="444699,190671 444699,679480 435706,688473 65209,688473 55713,678978 55713,190671 106773,157128 393640,157128"></polygon>
    <polygon class="mask" points="444699,190671 444699,679480 435706,688473 65209,688473 55713,678978 55713,190671 106773,157128 393640,157128"></polygon>
    <path class="draw" d="M396677 397755c7052,1566 12381,7889 12381,15409l0 92369c0,7511 -5325,13845 -12381,15412 -24072,57251 -80678,97460 -146676,97460 -87839,0 -159055,-71216 -159055,-159055 0,-87839 71216,-159055 159055,-159055 65998,0 122603,40208 146676,97460zm-146676 -59167c44008,0 82515,23546 103622,58723l33090 0c-7247,-15981 -17433,-30956 -30575,-44098 -58617,-58617 -153657,-58617 -212273,0 -58617,58617 -58617,153656 0,212273 58616,58618 153656,58618 212273,0 13142,-13142 23331,-28116 30577,-44099l-33091 0c-21107,35177 -59614,58725 -103623,58725 -66693,0 -120762,-54069 -120762,-120762 0,-66694 54069,-120762 120762,-120762zm90193 178578c-3278,-3008 -5132,-7123 -5132,-11633l0 -29264c-9208,-6274 -15254,-16842 -15254,-28823 0,19249 -15605,34854 -34856,34854 -19253,0 -34858,-15605 -34858,-34854 0,19249 -15603,34854 -34856,34854 -19251,0 -34856,-15605 -34856,-34854 0,19802 -16430,35561 -36197,34826 11988,47327 54860,82346 105911,82346 37398,0 70404,-18795 90098,-47452zm53082 -110823l-42361 0c-3756,0 -6821,3065 -6821,6821l0 92369c0,3753 3066,6823 6821,6823l42361 0c3755,0 6821,-3070 6821,-6823l0 -92369c0,-3756 -3063,-6821 -6821,-6821zm-323031 -219067l359560 0 -37918 -22749 -283725 0 -37917 22749zm228015 28999l79315 0c2935,0 5336,2401 5336,5337l0 15254c0,2936 -2401,5339 -5336,5339l-79315 0 0 -25930zm-88591 0l80713 0 0 25930 -80713 0 0 -25930zm-87191 0l79313 0 0 25930 -79313 0c-2937,0 -5338,-2403 -5338,-5339l0 -15254c0,-2936 2401,-5337 5338,-5337zm313869 50997l-372644 0 0 412986 372644 0 0 -412986zm-372644 -3942l372644 0 0 -68204 -372644 0 0 68204zm388346 416928c2,8666 -7034,15703 -15702,15703l-372644 0c-8669,0 -15703,-7031 -15703,-15703l0 -489057c0,-6175 3565,-11516 8749,-14081l43378 -26026c2522,-1508 5296,-2225 8035,-2221l283725 -49c3407,0 6561,1086 9134,2929l43361 26015c4897,2929 7614,8113 7619,13433l48 489057z"></path>
  </g><!--/.machine -->
  <g class="timer-up">
    <text class="timer" x="231016" y="88483">
    </text>
    <path class="bg" d="M168993 15147c27674,0 50108,22433 50108,50107 0,27277 -21797,49463 -48926,50092l0 39564 -2362 0 0 -39564c-27129,-626 -48928,-22813 -48928,-50092 0,-27674 22434,-50107 50108,-50107z"></path>
    <path class="icon" d="M168993 65254l35479 -12591c1434,4043 2167,8301 2167,12591 0,20791 -16854,37646 -37646,37646 -20791,0 -37646,-16855 -37646,-37646 0,-20791 16855,-37647 37646,-37647l0 37647z"></path>
  </g><!--/.timer-up -->
  <g class="number">
    <polygon points="105670,539360 146770,563080 187850,586810 187850,634250 187850,681700 146770,705420 105670,729140 64590,705420 23500,681700 23500,634250 23500,586810 64590,563080"></polygon>
    <g transform="matrix(1.01342 0 0 1 -92445.3 253722)">
      <text x="164000" y="415990">1</text>
    </g>
  </g><!--/.number -->
</svg>

What could cause this difference?

Edit: Reducing the size of the View Box doesn't improve the situation. Google Chrome only still cannot display <text> elements when other browsers (even IE) can.

Upvotes: 3

Views: 358

Answers (1)

gagan
gagan

Reputation: 269

The difference is due to the font-size limit in Chrome browser. The maximum font-size limit is 10000px for Chrome.

Upvotes: 1

Related Questions