Using transforms correctly

In the following code I am trying to make a hexagon using points I derived by hand for the unit hex and then I would like to scale it up. However, it does not work. Instead of of a white hex with a green border I get a solid green hex. Am I misunderstanding the effect of the transformation Scale? It seems to start with the unit hex and paint out all the way to the scaled out hex, thus the color. Or is that again a misunderstanding?

How do I get a scalable shape with border width X and desired color fill?

Polygon {
     points: [1, 0, 0.5, -0.866, -0.5, -0.866, -1, 0, -0.5, 0.866, 0.5, 0.866]
     fill: Color.WHITE
     t开发者_运维知识库ranslateX: 100
     translateY: 100
     strokeWidth: 2
     transforms: Scale {x: 20, y: 20}
     stroke: Color.GREEN
     opacity: 0.3
}

The problem seems to be you're setting the strokeWidth to 2.

The strokeWidth is applied BEFORE the scaling transformation, so you have a unit hex with a strokeWidth of 2, which completely obscures the white hex at the center. This obscured (and apparently solid green) hex is then scaled up 20 times...producing a larger green hex.

Try setting the strokeWidth lower, like this:

Polygon {
            points: [1, 0, 0.5,  - 0.866,  - 0.5,  - 0.866,  - 1, 0,  - 0.5, 0.866, 0.5, 0.866]
            fill: Color.WHITE
            translateX: 100
            translateY: 100
            strokeWidth: 0.5
            transforms: Scale {x: 20, y: 20}
            stroke: Color.GREEN
            opacity: 0.3
        }

and you should see the white hex with a green border. Continue reducing the strokeWidth until you get the desired results.