Spring Boot html和thymeleaf无法与html页面上的svg元素正常工作

ogsagwnx  于 2022-11-23  发布在  Spring
关注(0)|答案(2)|浏览(238)

我把SVG元素放到了html页面上，这个页面工作正常，但是我不能再使用命名空间和html，比如href。它被呈现为纯文本。模型和视图工作正常。
我的控制器类：

package com.denisiuk.catan.controller;

import com.denisiuk.catan.mapLogic.Dice;
import com.denisiuk.catan.mapLogic.MapInitializer;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

//dokonczyc mape

//implementacja rzutu kostka i zarabianie surowcow

@Controller
public class CatanController {

    @RequestMapping("mapa")
    public String showMap(){
        return "mapa";
    }

    @RequestMapping("start")
    public String startGame(Model model){
        String endl="\n";
        MapInitializer mapInitializer = new MapInitializer();
        Dice dice = new Dice();
        model.addAttribute("roll", dice.diceRoll());
        model.addAttribute("boardArray", mapInitializer.initializeBoard());
        model.addAttribute("numberArray", mapInitializer.initializeBoardNumbers());
        model.addAttribute("endl", endl);
        return "mapa";
    }

    @RequestMapping("roll")
    public String roll(Model model){
        Dice dice = new Dice();
        model.addAttribute("roll",dice.diceRoll());
        return "mapa";
    }
    }

中的html运行正常，显示的文本以圆圈表示。这只是部分代码，因为完整代码太长。完整html代码如下：https://pastebin.com/3c44Et6m
html代码：

<!DOCTYPE html>
<html   xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title> Catan </title>
</head>

<body>


<div>
    <p>
        <a>href="#">seba<</a>
        seba seba <th:block> th:text="${roll}"</th:block>
        th:text="${roll}"
    </p>
</div>


    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="13.829 -248.617 1451.315 1345.232" width="1451.315pt" height="1345.232pt">
        <defs>
            <style>
                circle{
                    fill: darkorange;
                }
                circle:hover{
                    fill: green;
                }
                line{
                    fill: red;
                    opacity: 0.4;
                }
                line:hover{
                    fill: red;
                    opacity: 1;
                }

            </style>
            <clipPath id="_clipPath_hw6aNYVQfu12u5DMiPJ3styZgjIkBwWu"><rect x="13.829" y="-248.617" width="1451.315" height="1345.232"/>
            </clipPath>
        </defs>
<g>
                <circle id="1" vector-effect="non-scaling-stroke" cx="464.3236814815398" cy="-59.039501464843624" r="90.03950146484362" fill="rgb(235,235,235)" />
                <text x="464.3236814815398" y="-59.039501464843624"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[0]} + ${endl} + ${numberArray[0]}"
                >
                </text>

                <circle id="2" vector-effect="non-scaling-stroke" cx="737.9866758663054" cy="-62.079002929687306" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="737.9866758663054" y="-62.079002929687306"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[1]} + ${endl} + ${numberArray[1]}"
                >
                </text>

                <circle id="3" vector-effect="non-scaling-stroke" cx="1017.6497007686489" cy="-52.53950146484365" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="1017.6497007686489" y="-52.53950146484365"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[2]} + ${endl} + ${numberArray[2]}"
                >
                </text>

                <circle id="4" vector-effect="non-scaling-stroke" cx="317.7001885616178" cy="188.15399169921864" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="317.7001885616178" y="188.15399169921864"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[3]} + ${endl} + ${numberArray[3]}"
                >
                </text>

                <circle id="5" vector-effect="non-scaling-stroke" cx="606.1547056514614" cy="188.15399169921864" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="606.1547056514614" y="188.15399169921864"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[4]} + ${endl} + ${numberArray[4]}"
                >
                </text>

                <circle id="6" vector-effect="non-scaling-stroke" cx="874" cy="195.73101806640614" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="874" y="195.73101806640614"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[5]} + ${endl} + ${numberArray[5]}"
                >
                </text>

                <circle id="7" vector-effect="non-scaling-stroke" cx="1152.4806944209927" cy="195.73101806640614" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="1152.4806944209927" y="195.73101806640614"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[6]} + ${endl} + ${numberArray[6]}"
                >
                </text>

                <circle id="8" vector-effect="non-scaling-stroke" cx="191.66068709677415" cy="428.73101806640614" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="191.66068709677415" y="428.73101806640614"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[7]} + ${endl} + ${numberArray[7]}"
                >
                </text>

                <circle id="9" vector-effect="non-scaling-stroke" cx="461.9999999999998" cy="425.0999999999999" r="90.0395014648436" fill="rgb(235,235,235)"/>
                <text x="461.9999999999998" y="425.0999999999999"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[8]} + ${endl} + ${numberArray[8]}"
                >
                </text>

                <circle id="10" vector-effect="non-scaling-stroke" cx="737.9866758663054" cy="428.73101806640614" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="737.9866758663054" y="428.73101806640614"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                >desert
                </text>

                <circle id="11" vector-effect="non-scaling-stroke" cx="1017.6497007686489" cy="422.4994999999999" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="1017.6497007686489" y="422.4994999999999"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[9]} + ${endl} + ${numberArray[9]}"
                >
                </text>

                <circle id="12" vector-effect="non-scaling-stroke" cx="1295.3999999999994" cy="426.6" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="1295.3999999999994" y="426.6"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[10]} + ${endl} + ${numberArray[10]}"
                >
                </text>

                <circle id="13" vector-effect="non-scaling-stroke" cx="328.49168074911796" cy="671.0390014648435" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="328.49168074911796" y="671.0390014648435"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[11]} + ${endl} + ${numberArray[11]}"
                >
                </text>

                <circle id="14" vector-effect="non-scaling-stroke" cx="606.8999999999997" cy="660.5999999999998" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="606.8999999999997" y="660.5999999999998"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[12]} + ${endl} + ${numberArray[12]}"
                >
                </text>

                <circle id="15" vector-effect="non-scaling-stroke" cx="876.9999999999999" cy="660.5999999999998" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="876.9999999999999" y="660.5999999999998"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[13]} + ${endl} + ${numberArray[13]}"
                >
                </text>

                <circle id="16" vector-effect="non-scaling-stroke" cx="1152.4806944209927" cy="668.0390014648438" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="1152.4806944209927" y="668.0390014648438"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[14]} + ${endl} + ${numberArray[14]}"
                >
                </text>

                <circle id="17" vector-effect="non-scaling-stroke" cx="468.3236814815398" cy="900.4994999999998" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="468.3236814815398" y="900.4994999999998"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[15]} + ${endl} + ${numberArray[15]}"
                >
                </text>

                <circle id="18" vector-effect="non-scaling-stroke" cx="737.9866758663054" cy="900.4994999999999" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="737.9866758663054" y="900.4994999999999"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[16]} + ${endl} + ${numberArray[16]}"
                >
                </text>

                <circle id="19" vector-effect="non-scaling-stroke" cx="1016.6497007686489" cy="900.4994999999998" r="90.03950146484362" fill="rgb(235,235,235)"/>
                <text x="1016.6497007686489" y="900.4994999999998"
                      text-anchor="middle"
                      stroke="red"
                      stroke-width="1px"
                      th:text="${boardArray[17]} + ${endl} + ${numberArray[17]}"
                >
                </text>
            </g>
        </g>
    </svg>

这个html部分被呈现为“href="#"〉seba

<div>
    <p>
        <a>href="#">seba<</a>
        seba seba <th:block> th:text="${roll}"</th:block>
        th:text="${roll}"
    </p>
</div>

请帮帮我，我不知道出了什么问题

spring-boot

2条答案

按热度按时间
htrmnn0y

htrmnn0y1#

无论是否包含<svg>部分，<div>部分都不包含有效的Thymeleaf：

<!-- this is not valid -->
<div>
    <p>
        <a>href="#">seba<</a>
        seba seba <th:block> th:text="${roll}"</th:block>
        th:text="${roll}"
    </p>
</div>
<!-- this is not valid -->

属性（包括th:属性）需要放置在每个开始标记内。
因此，例如，更改以下内容（其中也有放错位置的尖括号）：

<a>href="#">seba<</a>

更改为：

<a href="#">seba</a>

总的来说，以下是有效的Thymeleaf --但我不确定它是否正是您所需要的--它取决于您对生成的HTML的期望：

<div>
    <p>
        <a href="#">seba</a>
        seba seba <th:block th:text="${roll}"></th:block>
        
    </p>
</div>

如果你修复了上面的Thymeleaf，那么你的<svg>也应该可以继续工作。

赞(0）分享  回复(0）举报  2022-11-23
efzxgjgh

efzxgjgh2#

th:attr是获得所需注入属性的关键。

<button type="button">
    <svg id="icon-help" th:attr="viewBox=${helpSvgViewBoxString}">
        <path th:attr="fill=${appBarButtonTextColor}, d=${helpSvgDString}" />
    </svg>
</button>
赞(0）分享  回复(0）举报  2022-11-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com