Issue
i put svg element on html page wchich is working properly, but i can't use th namespace and html such as href anymore. It is rendered as plain text. Model and view is working properly.
my controller class:
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 in is working properly, showing text in circles. This is only part, because full code is too big. full html code here: https://pastebin.com/3c44Et6m
html code:
<!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>
this html part is rendered like "href="#">seba< seba seba th:text="${roll}" th:text="${roll}"
<div>
<p>
<a>href="#">seba<</a>
seba seba <th:block> th:text="${roll}"</th:block>
th:text="${roll}"
</p>
</div>
please help me, I don't have any idea what is wrong
Solution
Regardless of whether you include the <svg> section or not, the <div> section does not contain valid 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 -->
Attributes (including th: attributes) need to be placed inside each opening tag.
So, for example, change this (which also has misplaced angle brackets):
<a>href="#">seba<</a>
to this:
<a href="#">seba</a>
Overall, the following is valid Thymeleaf - but I am not sure it is exactly what you need - it depends on what you expect the generated HTML to be:
<div>
<p>
<a href="#">seba</a>
seba seba <th:block th:text="${roll}"></th:block>
</p>
</div>
If you fix the above Thymeleaf then your <svg> should also continue to work OK.
Answered By - andrewJames
