05-17-2018 20:13 - edited 05-17-2018 20:16
05-17-2018 20:13 - edited 05-17-2018 20:16
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
05-18-2018 13:07
05-18-2018 13:07
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
05-22-2018 06:43 - edited 05-22-2018 06:43
05-22-2018 06:43 - edited 05-22-2018 06:43
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.
05-31-2018 06:02 - edited 05-31-2018 06:03
05-31-2018 06:02 - edited 05-31-2018 06:03
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>
06-01-2018 10:57
06-01-2018 10:57
@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?
06-01-2018 12:20 - edited 06-01-2018 12:45
06-01-2018 12:20 - edited 06-01-2018 12:45
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