I created an svg composit by a shape and a text over. I give the style to all the elements and works good EXCEPT for the mobile. In the simulator the text looks good but using smartphone to navigate the website the text doesn't follow the rules set.

This is the result from the simulator in Chrome desktop

And this is the real rendering in Chrome and Safari for iPhone

The second line (tspan) doesn't follow the y instruction (i also tested dy, but the result is the same) and brake the word after the first letter

The code is

<svg width="185" height="84" viewBox="0 0 185 84" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>.wph-btn-ctg { font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 22px;
align-items: center;
text-align: center;
text-transform: uppercase;
fill: #FFFFFF; }</style>
<a href="#">
<path opacity="0.5" d="M4.3071 33.4856C5.50854 32.6656 6.62989 32.0821 7.68716 31.5502C10.09 30.2132 12.2406 29.2677 14.3432 28.3665C16.4457 27.4653 18.4561 26.6971 20.4545 25.9436C24.4593 24.4663 28.3199 23.1071 32.2326 21.9104C40.042 19.5466 47.9756 17.8107 56.3416 17.9806C62.2207 18.6307 68.3881 18.2909 74.5555 17.8698C77.6312 17.6704 80.7389 17.4488 83.7305 17.301C86.7221 17.1533 89.5655 17.0351 92.3529 17.0277C89.0489 16.6288 85.7489 16.289 82.3408 16.0748C78.9327 15.8606 75.4125 15.7498 71.9283 15.7793C64.952 15.8384 57.9115 16.3555 50.883 17.1311C43.8546 17.9068 36.7701 18.9705 29.5855 20.2631C25.9811 20.9206 22.3768 21.6371 18.6083 22.5605C16.73 23.0258 14.8197 23.5429 12.8373 24.1634C11.8442 24.4884 10.8349 24.8282 9.78969 25.2345C8.74443 25.6408 7.67515 26.0766 6.54179 26.638C7.73732 23.3313 9.16776 20.3351 10.7949 17.7295C12.4109 15.1408 14.2972 13.19 16.3376 11.9973C21.4557 9.95113 26.2575 8.51808 30.9831 7.28448C35.7088 6.05088 40.3103 5.06843 44.8678 4.28542C45.004 6.02133 45.2683 9.41928 45.4005 11.1256C51.507 8.33321 57.7612 6.78502 64.0509 6.50887C70.1748 6.25141 76.3019 6.56205 82.4089 7.43962C85.3845 7.82373 88.2519 8.17829 91.1554 8.51069C94.0589 8.8431 96.9504 8.99084 99.8619 8.99823C105.788 9.10203 111.707 8.17456 117.539 6.22816C116.694 5.28265 117.207 3.87177 117.387 2.74897C117.551 1.76652 117.459 0.998297 115.969 0.976136C117.459 0.976136 117.551 1.76652 117.387 2.74897C111.5 3.08138 105.717 3.24388 99.978 3.25127C97.1106 3.25127 94.2511 3.21926 91.3997 3.15524C88.5403 3.08876 85.7049 2.99272 82.7934 2.87454C70.7549 2.46087 58.6564 2.57906 45.9051 4.12291C55.7689 2.42394 65.4085 1.41196 74.996 0.953977C77.3989 0.835787 79.7911 0.756989 82.1726 0.717593L89.0289 0.62156L102.549 0.39257C111.568 0.215286 120.615 0.0158425 129.782 0.00106884C138.949 -0.0137048 148.204 0.119258 157.707 0.739752L164.227 1.23466C165.805 2.64661 167.424 3.89689 169.077 4.97979C170.703 6.05088 172.301 6.88559 173.987 7.67598C175.673 8.46637 177.307 9.03516 179.005 9.53008C180.775 10.1063 182.545 10.5421 184.319 10.8819C183.158 15.0333 184.051 21.7775 183.518 26.7119C183.222 29.1495 182.629 31.1883 181.292 32.215C179.954 33.2418 177.892 33.2418 174.724 32.0008C174.656 33.7367 174.516 37.1716 174.447 38.9445C177.285 41.241 179.79 44.7354 181.76 49.1457C183.277 52.7534 184.147 57.1421 184.251 61.7033C184.338 63.696 184.22 65.701 183.903 67.6128C183.738 68.5257 183.533 69.4125 183.29 70.2646C183.072 71.1232 182.822 71.9526 182.541 72.7466C181.989 74.3046 181.305 75.6888 180.515 76.8463L180.218 77.26C180.111 77.4085 179.997 77.5395 179.878 77.6515C179.606 77.91 179.321 78.1612 179.021 78.3902C178.395 78.8678 177.75 79.2531 177.091 79.5425C175.421 80.1429 173.733 80.5622 172.037 80.7983C171.139 80.9238 170.27 80.9756 169.317 81.0568C168.364 81.1381 167.419 81.1602 166.45 81.1528C165.481 81.1454 164.508 81.1528 163.522 81.0642C162.537 80.9755 161.52 80.9682 160.487 80.8869C158.436 80.7318 156.378 80.4658 154.243 80.2516C145.773 79.2692 136.79 78.0873 128.18 79.6016C115.653 81.0273 103.098 82.645 90.5667 79.2101C88.4201 78.5674 86.2255 78.0356 84.0749 77.5924L82.473 77.2895L80.9151 77.0162C79.8779 76.8537 78.8326 76.7133 77.7874 76.5952C73.6023 76.1446 69.3773 76.0485 65.1482 76.115C56.702 76.2406 48.328 76.9276 40.2102 76.3662C37.2867 76.5434 33.5462 79.0033 30.3344 81.1307C28.9157 82.1283 27.466 82.9694 25.9932 83.6496C24.7396 84.1445 23.7144 84.174 22.9014 83.3541C21.9591 82.8215 21.1465 81.7012 20.6027 80.1851C20.029 78.5584 19.5966 76.7764 19.3211 74.9036C21.2394 73.5148 23.4301 72.2074 25.6688 71.0329C27.9074 69.8584 30.2302 68.8168 32.5811 67.8565C37.3255 65.944 42.1203 64.4844 46.9463 63.4835C58.981 61.9349 71.0708 62.7396 83.0136 65.8842C71.3156 61.3118 59.0529 60.9794 46.9463 63.4835C42.0805 64.0819 37.2387 65.02 32.4849 66.3422C30.1101 66.9997 27.7593 67.7679 25.4565 68.6395C23.1537 69.5112 20.911 70.5158 18.8406 71.6534C18.356 68.1668 17.9114 64.4955 16.6339 61.755C16.6339 61.755 15.9371 62.3016 15.1001 63.0403C14.277 63.7521 13.475 64.5436 12.6972 65.4115C11.7961 65.1677 10.9631 64.8649 10.1461 64.6063C9.33097 64.3111 8.50183 64.1676 7.67114 64.1779C7.24195 64.2041 6.81466 64.2955 6.39361 64.4512C5.9691 64.6285 5.54459 64.8722 5.1401 65.0938C4.33914 65.6626 3.57422 66.1206 2.87338 65.9286C2.17254 65.7365 1.51174 64.8649 1.03517 63.0625C0.923036 62.5823 0.814907 62.1834 0.722796 61.6885C0.627711 61.1682 0.555393 60.6346 0.506536 60.093C0.458478 59.4651 0.402409 58.9702 0.370371 58.394C0.337692 57.7927 0.325655 57.1883 0.334329 56.5842C0.377812 52.1311 0.823099 47.7224 1.65191 43.5391C2.52096 40.0525 3.36597 36.7284 4.3071 33.4856Z" fill="#DD6854"/>
<text x="90" y="30" text-anchor="middle" alignment-baseline="middle" >TARGHE PER
  <tspan x="90" y="60">PAGGETTO</tspan>  
  </text>
  </a>
</svg>

I can't examinate the real rendering to understand where is the problem, looking at the code from chrome everythings seem to be correct. Where am i doing the error?

CodePudding user response：

It's a webkit bug! (not specific to apple safari)

Related to text-transform applied to svg <text><tspan> elements.

Quite baffling: this is a known issue since 2017!
webkit bugzilla report

Workaround: avoid text-transform

Just write your text in uppercase letters (you already did this) and
remove the text-transform:uppercase and everthing is fine.

Example snippet

<link href="https://fonts.googleapis.com/css2?family=Lato&family=Montserrat:wght@700" rel="stylesheet">
<svg width="185" height="84" viewBox="0 0 185 84"  xmlns="http://www.w3.org/2000/svg">
  <style>
    .wph-btn-ctg {
      font-family: Montserrat;
      font-style: normal;
      font-weight: bold;
      font-size: 18px;
      /* text-transform: uppercase; */
      fill: #fff;
    }
  </style>

  <a href="#">
    <path opacity="0.5" d="M4.3 33.5c1.2-.8 2.3-1.4 3.4-1.9c2.4-1.3 4.6-2.3 6.7-3.2c2.1-.9 4.1-1.7 6.1-2.4c4-1.5 7.9-2.8 11.8-4c7.8-2.4 15.7-4.1 24.1-3.9c5.9 .7 12 .3 18.2-.1c3.1-.2 6.2-.4 9.2-.6c3-.1 5.8-.3 8.6-.3c-3.3-.4-6.6-.7-10-1c-3.4-.2-6.9-.3-10.4-.3c-7 .1-14 .6-21 1.4c-7 .8-14.1 1.8-21.3 3.1c-3.6 .7-7.2 1.4-11 2.3c-1.9 .5-3.8 1-5.8 1.6c-1 .3-2 .7-3 1.1c-1 .4-2.1 .8-3.2 1.4c1.2-3.3 2.6-6.3 4.3-8.9c1.6-2.6 3.5-4.5 5.5-5.7c5.1-2 9.9-3.5 14.6-4.7c4.7-1.2 9.3-2.2 13.9-3c0.1 1.7 .4 5.1 .5 6.8c6.1-2.8 12.4-4.3 18.7-4.6c6.1-.3 12.3 .1 18.4 .9c3 .4 5.8 .7 8.7 1.1c2.9 .3 5.8 .5 8.7 .5c5.9 .1 11.8-.8 17.7-2.8c-.8-.9-.3-2.4-.2-3.5c0.2-1 .1-1.8-1.4-1.8c1.5 0 1.6 .8 1.4 1.8c-5.9 .3-11.7 .5-17.4 .5c-2.9 0-5.7 0-8.6-.1c-2.9-.1-5.7-.2-8.6-.3c-12-.4-24.1-.3-36.9 1.2c9.9-1.7 19.5-2.7 29.1-3.2c2.4-.1 4.8-.2 7.2-.2l6.9-.1l13.5-.2c9-.2 18.1-.4 27.2-.4c9.2 0 18.4 .1 27.9 .7l6.5 .5c1.6 1.4 3.2 2.7 4.8 3.7c1.6 1.1 3.2 1.9 4.9 2.7c1.7 .8 3.3 1.4 5 1.9c1.8 .6 3.5 1 5.3 1.4c-1.2 4.2-.3 10.9-.8 15.8c-.3 2.4-.9 4.5-2.2 5.5c-1.3 1-3.4 1-6.6-.2c-.1 1.7-.2 5.2-.3 6.9c2.8 2.3 5.3 5.8 7.3 10.2c1.5 3.6 2.4 8 2.5 12.6c0.1 2 0 4-.3 5.9c-.2 .9-.4 1.8-.6 2.7c-.2 .9-.5 1.7-.7 2.5c-.6 1.6-1.2 2.9-2 4.1l-.3 .4c-.1 .1-.2 .3-.3 .4c-.3 .3-.6 .5-.9 .7c-.6 .5-1.3 .9-1.9 1.2c-1.7 .6-3.4 1-5.1 1.3c-.9 .1-1.8 .2-2.7 .3c-1 .1-1.9 .1-2.9 .1c-1 0-1.9 0-2.9-.1c-1-.1-2-.1-3-.2c-2.1-.2-4.1-.4-6.2-.6c-8.5-1-17.5-2.2-26.1-.6c-12.5 1.4-25.1 3-37.6-.4c-2.1-.6-4.3-1.2-6.5-1.6l-1.6-.3l-1.6-.3c-1-.2-2.1-.3-3.1-.4c-4.2-.5-8.4-.5-12.6-.5c-8.4 .1-16.8 .8-24.9 .3c-2.9 .2-6.7 2.6-9.9 4.8c-1.4 1-2.9 1.8-4.3 2.5c-1.3 .5-2.3 .5-3.1-.3c-.9-.5-1.8-1.7-2.3-3.2c-.6-1.6-1-3.4-1.3-5.3c1.9-1.4 4.1-2.7 6.3-3.9c2.2-1.2 4.6-2.2 6.9-3.2c4.7-1.9 9.5-3.4 14.4-4.4c12-1.5 24.1-.7 36.1 2.4c-11.7-4.6-24-4.9-36.1-2.4c-4.9 .6-9.7 1.5-14.5 2.9c-2.4 .7-4.7 1.4-7 2.3c-2.3 .9-4.5 1.9-6.6 3c-.5-3.5-.9-7.2-2.2-9.9c0 0-.7 .5-1.5 1.3c-.8 .7-1.6 1.5-2.4 2.4c-.9-.2-1.7-.5-2.6-.8c-.8-.3-1.6-.4-2.5-.4c-.4 0-.9 .1-1.3 .3c-.4 .2-.8 .4-1.3 .6c-.8 .6-1.6 1-2.3 .8c-.7-.2-1.4-1.1-1.8-2.9c-.1-.5-.2-.9-.3-1.4c-.1-.5-.2-1.1-.2-1.6c0-.6-.1-1.1-.1-1.7c0-.6 0-1.2 0-1.8c0-4.5 .5-8.9 1.3-13c0.9-3.5 1.7-6.8 2.7-10.1z" fill="#DD6854" />
    <text x="90" y="30" text-anchor="middle" alignment-baseline="middle" >
      TARGHE PER
      <tspan x="90" y="60">PAGGETTO</tspan>
    </text>
  </a>
</svg>

Debugging tip:

I could also reproduce this bug running a Linux based webkit browser in a virtual machine (Virtual Box, Linux Mint distribution, Epiphany and Midori).