如何使用 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)"

【讨论】：

以上是关于如何使用 svg 剪辑路径？的主要内容，如果未能解决你的问题，请参考以下文章