Image clipping using mask works on simulator but not on Versa

[Bluefront]

I am trying to clip an image with text. It displays correctly on the simulator but not on the device. Any tip on how I can solve this problem? Thanks.

  <defs>
  <mask id="mask">
     <text class="colon"> : </text>
     <text id="hour1" />
     <text id="hour2" />
     <text id="minute2" />
     <text id="minute1" />
  </mask> 
  </defs>
  <svg mask="#mask" width="100%" height="100%">
  <image href="Lotus.jpg" load="sync" />
  </svg>

On the simulator

On Fitbit Versa 

[JonFitbit]

I wonder if you could make a template symbol containing the text elements, then apply the mask to that symbol?

https://dev.fitbit.com/build/guides/user-interface/svg/#template-symbols

[Bluefront]

Thanks. I don't really know svg and basically pick it up from the Fitbit SVG guide. I have tried a few things and the result is the same. Works on the simulator, but not on the device.

  <defs>
    <symbol id="mytime">
      <text class="colon"> : </text>
      <text id="hour1" />
      <text id="hour2" />
      <text id="minute2" />
      <text id="minute1" />
    </symbol> 
    <mask id="mask">
      <use href="#mytime" fill="white" />
    </mask>
  </defs>
  <svg mask="#mask" >
      <image href="Lotus.jpg" load="sync" />
  </svg>

If I avoid overlapping the numbers, everything would be fine.

I can live with this.

[Mark-D]

I have the exact same issue - working fine in simulator, but I get clipping on the Versa (same issue as original poster).

I hope that this can be fixed as it means I can't currently do what I want to do with my watch face 😞

<svg viewport-fill="#000000">
  <defs>
    <mask id="timeParts">
      <text id="hours" x="0" y="104"/>
      <text id="minutes" x="0" y="184"/>
      <text id="seconds" x="0" y="226"/>
    </mask>
  </defs>
  <svg>
    <svg mask="#timeParts" width="100%" height="100%">
      <gradientRect width="100%" height="100%" fill="cyan"
        gradient-type="bilinear"
        gradient-x1="10%" gradient-y1="10%"
        gradient-x2="80%" gradient-y2="80%"
        gradient-color2="yellow"
        gradient-color3="magenta"
        gradient-color4="green" />
    </svg>
  </svg>
</svg>

[JonFitbit]

---

@Mark-D wrote:

I have the exact same issue - working fine in simulator, but I get clipping on the Versa (same issue as original poster).

---

Can you provide a project link and I'll take a look?

[Mark-D]

Hi Jon. I only have single project in my account named 'Scratchpad'. How do I get a link to share?

Please note, this is just me trying out masks that I would need for my watch face and not the actual watch face itself. Part of the learning process 😉

This is the URL from my address bar : https://studio.fitbit.com/projects/MEVbr6/editor