Need help implementing a radial gradient fill in Perspective

General Discussion
1

(this is in Perspective in 8.1.15)

I have created a simple SVG that is a circle with a radial fill:

Screen Shot 2022-03-25 at 9.59.46 AM

The content of the SVG is:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <circle cx="28.346" cy="28.346" r="28.346" style="fill:url(#_Radial1);"/>
    <defs>
        <radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(28.3465,0,0,28.3465,28.3465,28.3465)">
            <stop offset="0" style="stop-color:#fff;stop-opacity:1"/>
            <stop offset="1" style="stop-color:#73da2e;stop-opacity:1"/>
        </radialGradient>
    </defs>
</svg>

When I drag the SVG into Perspective as an embedded image, the gradient information is not imported and I get a “black” filled circle. (and this is expected) But I want to duplicate it with the properties of the object. This was my attempt where I added the “fill” (based on what I saw in this answer )

Screen Shot 2022-03-25 at 10.05.25 AM

But this resulted in a plain green filled circle:

Screen Shot 2022-03-25 at 10.09.24 AM

I’m not too far off as Perspective hasn’t complained about my property manipulations. But obviously I am just cargo cult programming and have no clue as to what I am actually doing. So how can I correct my mistake and achieve my desired radial fill?

2

Answering my own question.

I was looking at various SVG sources online and saw some in this one that the gradientTransform was not specified. So on a hunch I deleted it from the properties of my Perspective object and everything worked as expected!

Screen Shot 2022-03-25 at 12.23.09 PM

3

I’m not sure if that was just luck or if it would work for every case.

Have a look at this topic
https://forum.inductiveautomation.com/t/embedding-plain-svg-results-in-incorrect-rendering/55778

4

I don’t know either. But in this case it worked. So I’m happy! I did read a lot of SVG questions and remember seeing the " The SVG spec is immense . Really, truly, ridiculously immense." quote and that ignition doesn’t parse everything. But the link I put in my solution shows an official SVG without a transform matrix and that works, so I was guessing that there they may be SVG rendering defaults that apply to shapes (such as a radial transform starting from the center of a circle)

1 Like