svg - 如何使用 elm-ui 在 elm 中显示圆形图像？

Question

我正在使用 elm-ui，我试图完成一项(在我看来)简单的任务，但我正在努力。
我想显示一个圆形图像，就像我们在 iOS 或其他几个平台上的联系表单中所知道的那样。

据我所知，有两个名为 elm-ui 的库:
-mdgriffith/elm-ui
-gdotdesign/elm-ui
我正在使用第一个。

我正在使用 Element.Border 但这只是在背景中添加了一个边框。

import Element exposing (image)
import Element.Border as Border

image
  [ Border.rounded 50
  , Border.width 5
  ]
  { src = "img.png"
  , description = "Some text..."
  }

我还尝试使用 svg 来显示一个圆圈并用图像作为背景填充它。但现在我很难将背景设置为除颜色之外的任何其他颜色。

import Element exposing (html)
import Svg exposing (svg)
import Svg.Attributes exposing (cx, cy, fill, height, r, width)

html
  (svg
      [ width "100"
      , height "100"
      ]
      [ circle
          [ cx "50"
          , cy "50"
          , r "50"
          , fill "orange" -- That´s where I would like to insert my image.
          ]
          []
      ]
  )

我来自 .Net 世界，通过 WPF 的 XAML，我会使用 svg 作为图像上的不透明蒙版。

如何在 ELM 中实现这一目标？
感谢您的帮助!

Answer 1

我在 Elm Discourse 上得到了问题的答案.

这非常简单，只需添加 Border.rounded 和 clip。

image
    [ centerX
    , centerY
    , Border.rounded 50 
    , clip
    ]
    { src = "https://cdn.cnn.com/cnnnext/dam/assets/191024091949-02-foster-cat-large-169.jpg"
    , description = "A Cat"
    }

回答的人还提供了 Ellie Example .