# Bind layer/element of custom SVG component to Tag event in Perspective View

**URL:** <https://forum.inductiveautomation.com/t/bind-layer-element-of-custom-svg-component-to-tag-event-in-perspective-view/64675>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [September 29, 2022, 5:27pm UTC](https://forum.inductiveautomation.com/t/bind-layer-element-of-custom-svg-component-to-tag-event-in-perspective-view/64675 "2022-09-29T17:27:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Liliya\_Boyadjieva](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/liliya_boyadjieva/32/39073_2.png) [@Liliya\_Boyadjieva](https://forum.inductiveautomation.com/u/Liliya_Boyadjieva)\
**Post date:** [September 29, 2022, 5:27pm UTC](https://forum.inductiveautomation.com/t/bind-layer-element-of-custom-svg-component-to-tag-event-in-perspective-view/64675/1 "2022-09-29T17:27:54Z")

</div>

Hi! I have an SVG (that I made) that I have embedded in a Perspective View coordinate container. There are multiple elements and layers in that SVG. I would like to bind an element’s fill paint to a Tag using a Map Transform.

I know it is possible to do this when the Map’s Output Type is a Color, but I will be applying this transform to many other elements, in several different views, so I would much rather have the Output Type be a Style Class so I can edit them all at once, but it does not seem to work.

![Bind_OutputColor](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/5/95594be8c029e6d65682682f7e533b741483b66d.png)

I looked into scripting, but since Tag Event scripting is Gateway scoped, I don’t believe it is possible to change a component in any way like that. Am I mistaken? What are the available options to achieve that?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 29, 2022, 6:27pm UTC](https://forum.inductiveautomation.com/t/bind-layer-element-of-custom-svg-component-to-tag-event-in-perspective-view/64675/2 "2022-09-29T18:27:02Z")

</div>

Instead of a Map transform, I would use a script transform which requests a color from a project script. This would allow you to update the colors in one place (the project script) while not needing to go to each element to update any transform.

SvgPackage (project script):

```auto
def getFill(tagValue):
    colorMap = {
        0: "#FF0000",
        1: "#00FF00"
    }
    fallback = "#FFFFFF"
    return colorMap.get(tagValue, fallback)

```

Transform:

```auto
def transform(self, value, quality, timestamp):
	return SvgPackage.getFill(value)

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 29, 2022, 11:36pm UTC](https://forum.inductiveautomation.com/t/bind-layer-element-of-custom-svg-component-to-tag-event-in-perspective-view/64675/3 "2022-09-29T23:36:04Z")

</div>

You can also just delete the fill prop within the element and use the style prop which can have the classes prop within it.