如何使用svg clipPath？

Question

阅读完doc后，我尝试了这段代码：

main =
    svg [ width "100", height "100" ]
        [ Svg.clipPath [ id "clipCircle" ] [ circle [ cx "50", cy "50", r "50" ] [] ]
        , rect
            [ width "100"
            , height "100"
            , fill "red"
            , Svg.Attributes.clipPath "clipCircle"
            ]
            []
        ]

矩形未剪裁。仍然显示红色方块而不是圆圈。我做错了什么？

Answer 1

引用url(...)时需要使用clipCircle表示法：

Svg.Attributes.clipPath "url(#clipCircle)"