I am trying to use SVGs that have been horizontally flipped in Survey123. The simplest way to flip an SVG is to wrap its contents in the following:
<g transform="scale(-1, 1)" transform-origin="center">
...
</g>
Unfortunately, Survey123 apparently cannot handle the transform-origin SVG attribute, and will not render an image. I know that transform-origin is the cause of failure, because Survey123 will render an image if the following is used instead:
<g transform="scale(-1, 1) translate(-525, 0)">
...
</g>
In this case, a negative translation is needed to correct for the fact that the scale transformation is applied with respect to the lower left of the SVG by default, instead of the center. This is less convenient than using transform-origin, because the magnitude of the translation (525 units in this example) must be set to match the SVG's width or viewBox width, depending on the particular SVG. I will be generating many flipped SVGs automatically, and it would be preferable not to have to include logic to calculate the correct translation to apply.
If the transform-origin attribute is intentionally not supported in Survey123, it would be helpful for the documentation to include a list of supported and unsupported SVG attributes.
As an example, I have attached two modified versions of the difficulty.svg file from the Using the image-map appearance in Survey123 blog post. I can view both of them in every SVG viewer or browser I have tried, but the version that uses transform-origin will not render in Survey123.
The same issue occurs whether adding images to questions or to multiple choice response options. I am using Survey123 Connect 3.14.256 and version 3.14.242 of the field app.
