Strange SVG import

[dfleury2]

Hi,
I am trying to import this SVG (svg file is linked) to Designer (Windows latest version of Designer I guess), and got strange result (different from Edge or Firefox):
I am expecting the first image but got the second one. 

BYR_color_wheel.svg

[Zen22]

I've tried this in browsers as well as Pixelmator Pro and Boxy-SVG, which have far superior SVG support. They all display it properly. (And come highly recommended for SVG work.) The code is literally just one type of shape repeated...

<path id="a" d="M2.991,0.815A3.1,3.1 0 0 0 2.991,-0.815L4.825,-1.311A5,5 0 0 1 4.825,1.311"/>

with a simple transform to rotate and place it in the correct positions.

<use xlink:href="#a" fill="#fe2712" transform="rotate(30)"/>

The problem, I believe is that Affinity Designer is incompatible with the CSS rotate transform function. Which honestly, is such a basic feature. Although SVGs typically use the matrix transform function, Affinity should've thought of this when designing for SVG compatibility. 

Mozilla says:

Quote

Warning: As per the spec, you should be able to also use CSS transform functions. However, the compatibility isn't guaranteed.

Anyway, I've converted these transforms into matrix transforms, which Affinity supports. 

BYR_color_wheel.svg

[dfleury2]

Ok, thanks for the info.

 

Edited March 9, 2022 by dfleury2

[Lee D]

I've logged and pass this over to the developers as it imports correctly in Designer on macOS.

[Old Bruce]

9 hours ago, Lee D said:

I've logged and pass this over to the developers as it imports correctly in Designer on macOS.

Not on OS 11.6.4

I am talking about the first file posted from dfleury2 not the fixed file from Zen22, the files have the same name.