如何使用 svg 剪辑路径？

Posted 2023-05-07

【中文标题】如何使用 svg 剪辑路径？

【英文标题】：How to use svg clipPath?

【发布时间】：2017-11-17 14:14:48

【问题描述】：

阅读文档后，我尝试了以下代码：

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"
            ]
            []
        ]

矩形没有被剪裁。仍显示红色方块而不是圆形。我做错了什么？

【参考方案1】：

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

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