时间戳

首页 > 解决方案 > 使用thymeleaf从html中的svg图形分配点击值

html - 使用thymeleaf从html中的svg图形分配点击值

问题描述

这是我想做的：

  1. 单击 svg 图形字段（我的目标是将值硬编码到该字段）-该值将包含两个参数，wchich 将对应二维数组的索引
  2. 通过控制器将此值传递给我的方法

这是我的一段 HTML

<a xlink:href="#"><circle vector-effect="non-scaling-stroke" cx="325.4916807491179" cy="-130" r="36" fill="rgb(235,235,235)"/></a>
                <text x="325.4916807491179" y="-130"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                >0, 4
                </text>

在这个例子中，我想传递“0”和“4”

html 和 svg 输出看起来像这样

我不知道如何做到这一点

标签： htmlspring-bootsvgthymeleaf

解决方案

column 和 row 是作为 @PathVariable 传递的变量

<a th:href="@{/showmap/{column}/{row} (column=${0}, row=${4})}"><circle vector-effect="non-scaling-stroke" cx="325.4916807491179" cy="-130" r="36" fill="rgb(235,235,235)"/></a>
                <text x="325.4916807491179" y="-130"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                >0, 4

推荐阅读