Control color of custom vector shape in live prototype

When creating a blank dynamic panel, axure generates an object in the css style sheet to be able to control it’s properties - example:
#u1_state0 {
border-width:0px;
position:absolute;
left:0px;
top:0px;
width:860px;
height:808px;
-ms-overflow-x:hidden;
overflow-x:hidden;
-ms-overflow-y:hidden;
overflow-y:hidden;
background-color:rgba(0, 0, 153, 1);
background-image:none;
}

I have created a custom shape with the pen tool, but axure by default converts this to an static image when exporting the project. I’d like to be able to retain the ability to change the shape’s css color after generating. Is this possible?

Ultimately I need to create a custom shape and have the ability to change it’s color (not fake it with different states). Any help on this would be greatly appreciated!

I believe that if you import an SVG into Axure it will remain an SVG when exporting instead of getting converted to a raster image like custom shapes in Axure do. So if you create the SVG in another program them import it what you want to do should be possible.

Thanks man!

I’ve discovered accessing the properties of a referenced SVG image can be tricky (vs an SVG that is being generated in the code). Since this is just a prototype, I found another solution: Using CSS mask to mask a div using an referenced SVG image.

#u2_state0 {
border-width:0px;
position:absolute;
left:0px;
top:0px;
width:860px;
height:808px;
-ms-overflow-x:hidden;
overflow-x:hidden;
-ms-overflow-y:hidden;
overflow-y:hidden;
background-color:rgba(0, 102, 153, 1);
background-image:none;
-webkit-mask: url(TestShape.svg) center / contain no-repeat;
}

That way, I can simply change the background color of the div, and the mask makes it appear to be the shape I need. Thanks for getting me started!