Hi there, I'm attempting to make the hands on my analog clockface taper to a point using the rounded corners of rectangles. My code looks something like this (basically an almond-sort of shape with a second square rectangle overlapping half of it):
<g id="ac_min" transform="translate(50%,50%)">
<rect x="-3" y="-74" width="6" height="74" rx="3" ry="27" />
<rect x="-3" y="-37" width="6" height="37" />
</g>In the simulator this looks lovely:
But when I actually load the app onto my Ionic, it doesn't seem happy about it:
Occasionally it seems like other artifacts appear somewhere along the hand as well, but it's certainly not matching what the simulator shows. My best guess is that this is some sort of bug on the device-side to do with SVG rendering (since the simulator matches what I would expect), but it's always possible the device is rendering my code correctly and the simulator has some sort of issue that makes it accidentally prettier.
That said, has anyone experienced this before? Any suggestions for a fix?
Best Answer
Best Answer Best Answer Best Answer Best Answer
Best Answer Best Answer