06-26-2019 13:41
06-26-2019 13:41
I am attempting to set an image as the "texture" for text.
This works fine in the simulator for all 3 devices, but does not work when the app is installed to my fitbit versa, the fill color of the text is displayed.
<mask id="mask">
<text id="TimeText" font-size="100" font-family="Colfax-Black" text-anchor="middle" text-length="32" x="50%" y="20%+60" fill="white" />
</mask>
<svg mask="#mask" width="100%" height="100%">
<image href="images/myimage.png" load="sync"/>
</svg>
Frustratingly, if I replace the image with a gradient, It works on the device (as well as the simulator) and the text being masked has a gradient "texture".
<mask id="mask"> <text id="TimeText" font-size="100" font-family="Colfax-Black" text-anchor="middle" text-length="32" x="50%" y="20%+60" fill="white" /> </mask> <svg mask="#mask" width="100%" height="100%"> <gradientRect x="0" y="0" width="348" height="250" gradient-type="bilinear" gradient-x1="30" gradient-y1="30" gradient-x2="100%-60" gradient-y2="100%-60" gradient-color1="cyan" gradient-color2="white" gradient-color3="magenta" gradient-color4="green" /> </svg>
Answered! Go to the Best Answer.
06-26-2019 13:47
06-26-2019 13:47
<mask> is pretty flaky on the hardware.
However, in case the mask image on your watch is larger than the screen size (348x250), reduce it to the display size before putting it in your project. The hardware doesn't like scaling large images either.
06-26-2019 13:47
06-26-2019 13:47
<mask> is pretty flaky on the hardware.
However, in case the mask image on your watch is larger than the screen size (348x250), reduce it to the display size before putting it in your project. The hardware doesn't like scaling large images either.
06-26-2019 18:14
06-26-2019 18:14
Resizing the actual image did seem to work. From a hardware perspective I suppose I can understand why, but from a web developer's perspective that is quite non-intuitive.
The help is much appreciated, regardless.
It would be nice if the simulator more accurately represented the hardware it is simulating, but I suppose that is understandable.
Thanks!