Wie verwende ich Svg ClipPath?

Question

Nach dem doc lesen, habe ich versucht, diesen Code:

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

Das Rechteck nicht abgeschnitten wird. Ein rotes Quadrat wird immer noch anstelle eines Kreises angezeigt. Was mache ich falsch?

Answer 1

Sie müssen url(...) Notation verwenden, wenn clipCircle Referenzierung:

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