八木日記

いろいろなこと

elmとsvgのはなし

elmで図形を描く場合、svgで描く方法があるらしい
こちらを参考にさせていただきました

qiita.com

試しに、公式パッケージサイトのコードをコピペしてみる

package.elm-lang.org

import Svg exposing (..)
import Svg.Attributes exposing (..)

main =
  svg
    [ width "120"
    , height "120"
    , viewBox "0 0 120 120"
    ]
    [ rect
        [ x "10"
        , y "10"
        , width "100"
        , height "100"
        , rx "15"
        , ry "15"
        , fill "green"
        ]
        []
    , circle
        [ cx "50"
        , cy "50"
        , r "50"
        , fill "pink"
        ]
        []
    ]

公式パッケージからコピペしたソースに「fill "green"」と「fill "pink"」を追加した

elm reactorを起動して実行結果をみてみると、ピンクの円と緑の矩形が表示された
f:id:ygnb0605:20190729230642p:plain

この時、elm/svgパッケージをインストールしておくこと
(私はelm.jsonの「"direct"」の中に「"elm/svg": "1.0.1"」と手書きで記述し、インストールしました
(あんまり良くない方法かも・・・))