# Need help implementing a radial gradient fill in Perspective

**URL:** <https://forum.inductiveautomation.com/t/need-help-implementing-a-radial-gradient-fill-in-perspective/57655>\
**Category:** General Discussion\
**Tags:** ignition80\
**Created:** [March 25, 2022, 4:13pm UTC](https://forum.inductiveautomation.com/t/need-help-implementing-a-radial-gradient-fill-in-perspective/57655 "2022-03-25T16:13:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [March 25, 2022, 4:13pm UTC](https://forum.inductiveautomation.com/t/need-help-implementing-a-radial-gradient-fill-in-perspective/57655/1 "2022-03-25T16:13:45Z")

</div>

(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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/65abe10f6064a170ff7eafb2fade026b98704c85.png)

The content of the SVG is:

```auto
<?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](https://forum.inductiveautomation.com/t/tip-how-to-create-svgs-and-changing-the-fill-color-dynamically/53361/16) )

![Screen Shot 2022-03-25 at 10.05.25 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b10ced15392c9d2ef7bcedd542a42d229dba641a.png)

But this resulted in a plain green filled circle:

![Screen Shot 2022-03-25 at 10.09.24 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e68cad9c031253cd5d026780566201a62e62ac9d.png)

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?

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [March 25, 2022, 6:26pm UTC](https://forum.inductiveautomation.com/t/need-help-implementing-a-radial-gradient-fill-in-perspective/57655/2 "2022-03-25T18:26:44Z")

</div>

Answering my own question.

I was looking at various SVG sources online and saw some in [this one](https://www.w3.org/TR/SVG11/pservers.html) 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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/9/89356df3dd66446e106f803e2924d3b1d86463d7.png)

---

<div class="post-metadata">

**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\
**Post date:** [March 26, 2022, 10:31am UTC](https://forum.inductiveautomation.com/t/need-help-implementing-a-radial-gradient-fill-in-perspective/57655/3 "2022-03-26T10:31:49Z")

</div>

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](https://forum.inductiveautomation.com/t/embedding-plain-svg-results-in-incorrect-rendering/55778)

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [March 26, 2022, 1:55pm UTC](https://forum.inductiveautomation.com/t/need-help-implementing-a-radial-gradient-fill-in-perspective/57655/4 "2022-03-26T13:55:04Z")

</div>

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)