构建一个应用程序，让我们在svg上标记形状

我写道，这是关于svg的。我想知道如何才能使视图中打印的每个元素在鼠标移到其上时执行某些事件，例如，单击或单击等

我使用的是Elm 0.18、Elm lang/svg/2.0.0

模块戳记暴露（…）
导入元素公开（…）
导入Html公开（…）
导入鼠标
导入Svg（…）
导入Svg.Attributes公开（..）
导入虚拟对象
类型别名位置=
（Int，Int）
类型别名模型=
{单击：列表位置
}
输入味精
=添加单击位置
型号：型号
模型=
{点击=点击
}
更新：Msg->Model->（Model，Cmd-Msg）
更新msg模型=
味精案例
添加单击位置->
{model | clicks=pos:：model.clicks}！[]
--drawStamp获取一个位置并返回一个图形svg
drawStamp：（Int，Int）->Svg msg
邮票（x，y）=
让
串=
toString（x）
串=
toString（y）
在里面
Svg.circle
[填充“#60B5CC”，填充不透明度“0.5”，cx字符串x，cy字符串y，r“10”]
[]
查看：模型->Html消息
视图模型=
让
团体=
List.map drawStamp model.clicks
在里面
--现在制作一个包含该组的拼贴
svg
[Svg.Attributes.width“300”、Svg.Attributes.height“300”、viewBox“0 300”]
组
点击：列表（Int，Int）
咔哒声=
--我们只需要初始化位置
[]
main：程序从不使用模型Msg
主要=
Html.program
{init=（模型，Cmd.none）
，update=update
，视图=视图
，订阅=订阅
}
订阅：模型->子消息
订阅模式=
Mouse.clicks（\{x，y}->AddClick（x，y））

您正在使用的包

elm lang/svg

有它自己的功能。如果导入它们，则可以在每个svg属性列表中使用它们。下面是您的示例，其中包含鼠标悬停的圆圈位置的

Debug.log

输出

模块戳记暴露（…）
导入元素公开（…）
导入Html公开（…）
导入鼠标
导入Svg（…）
导入Svg.Attributes公开（..）
导入Svg.Events公开（onMouseOver）
导入虚拟对象
类型别名位置=
（Int，Int）
类型别名模型=
{单击：列表位置
，鼠标悬停：位置
}
输入味精
=添加单击位置
|鼠标悬停位置
型号：型号
模型=
{点击=点击
，mouseOver=（0,0）
}
更新：Msg->Model->（Model，Cmd-Msg）
更新msg模型=
味精案例
添加单击位置->
{model | clicks=pos:：model.clicks}！[]
鼠标悬停位置->
{model | mouseOver=Debug.log“鼠标移到位置”pos}！[]
--drawStamp获取一个位置并返回一个图形svg
drawStamp：（Int，Int）->Svg Msg
邮票（x，y）=
让
串=
toString（x）
串=
toString（y）
在里面
Svg.circle
[fill“#60B5CC”、fillOpacity“0.5”、cx字符串_x、cy字符串_y、r“10”、onMouseOver Html消息
视图模型=
让
团体=
List.map drawStamp model.clicks
在里面
--现在制作一个包含该组的拼贴
svg
[Svg.Attributes.width“300”、Svg.Attributes.height“300”、viewBox“0 300”]
组
点击：列表（Int，Int）
咔哒声=
--我们只需要初始化位置
[]
main：程序从不使用模型Msg
主要=
Html.program
{init=（模型，Cmd.none）
，update=update
，视图=视图
，订阅=订阅
}
订阅：模型->子消息
订阅模式=
Mouse.clicks（\{x，y}->AddClick（x，y））

我用这种方法解决了这个问题

。。。
输入味精
=添加单击位置
|事件点击
型号：型号
模型=
{点击=点击
}
更新：Msg->Model->（Model，Cmd-Msg）
更新msg模型=
味精案例
事件点击->
让
_ =
Debug.log“msg1”事件单击操作
在里面
（型号，Cmd.none）
添加单击位置->
{model | clicks=pos:：model.clicks}！[]
--drawStamp获取一个位置并返回一个图形svg
drawStamp：（Int，Int）->Svg Msg
邮票（x，y）=
让
串=
toString（x）
串=
toString（y）
在里面
Svg.circle
[填充“#60B5CC”、填充不透明度“0.5”、cx字符串x、cy字符串y、r“30”，单击事件单击]
[]
…

感谢您的关注