如何使用 svg 剪辑路径？

Question

阅读文档后，我尝试了这段代码：

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

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

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

如何使用 svg 剪辑路径？

How to use svg clipPath?

svg

elm