html和thymeleaf与html页面上的svg元素不能正常工作
我将svg元素放在html页面上，该页面工作正常，但我不能再使用名称空间和诸如href之类的html。它被呈现为纯文本。模型和视图工作正常 我的控制器类：html和thymeleaf与html页面上的svg元素不能正常工作,html,spring-boot,spring-mvc,svg,thymeleaf,Html,Spring Boot,Spring Mvc,Svg,Thymeleaf,我将svg元素放在html页面上，该页面工作正常，但我不能再使用名称空间和诸如href之类的html。它被呈现为纯文本。模型和视图工作正常 我的控制器类： package com.denisiuk.catan.controller; import com.denisiuk.catan.mapLogic.Dice; import com.denisiuk.catan.mapLogic.MapInitializer; import org.springframework.stereotype.Co
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";
}
}
<!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>
卡坦
href=“#”>seba无论是否包含
部分，
部分都不包含有效的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 -->
为此：
<a href="#">seba</a>
总的来说，以下内容是有效的，但我不确定它是否正是您所需要的，这取决于您期望生成的HTML是什么：
塞巴塞巴
如果您修复了上述Thymeleaf，则您的
也应继续正常工作。无论是否包含
部分，该
部分都不包含有效的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 -->
为此：
<a href="#">seba</a>
总的来说，以下内容是有效的，但我不确定它是否正是您所需要的，这取决于您期望生成的HTML是什么：
塞巴塞巴
如果您修复了上面的Thymeleaf，那么您的
也应该可以继续正常工作。它可以工作，谢谢：）@maszpet-很高兴它起到了作用。如果您还没有这样做，我建议您采取。它的工作，谢谢：）@maszpet-很高兴它有帮助。如果你还没有这样做，我建议你采取行动。