Can't change SVG's opacity in IE

Hi all,
I have a nodeTemplate which contains some SVG source pictures, but when I try to change the opacity of node, I found the performance on chrome and IE is not the same:

This is the result I want, and also the result of chrome:

This is the result of IE, all svg pictures did not change the opacity:

I tried some simple methods but found IE’s SVG can not set opacity:

var $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv");       // for conciseness in defining templates

// define the Node template
myDiagram.nodeTemplate =
    $(go.Node, "Auto",
        $(go.Shape, { fill: "red", stroke:"white" }),
            $(go.TextBlock, { margin: 50 },
            new go.Binding("text")),
            $(go.Picture, {
                opacity: 0.5
                desiredSize:  new go.Size(30, 12),
                source: "images/test.svg",

The opacity set in go.Picture is invalid in IE, is there any easy way to change IE’s SVG opacity?


IE has a lot of problems with SVG files. Make sure the SVG file has its viewport set and that your desiredSize is exactly the size of the SVG file.

I created an example below, but just realized it has a big problem. Opacity in IE works when the scale is scale: 0.1, or scale: 0.2,, but suddenly starts to fail when set to scale: 0.3,.

Unfortunately, I don’t know why IE is doing this. You may need to switch to PNGs if you want semi-transparents Pictures. Sorry for the trouble.


See here for more info on using SVG picture sources: GoJS Pictures -- Northwoods Software

I think I can accept Zoom SVG and then change the scale to 0.1. Thanks