I created a couple of classes wrapping svg tags.
The code compiles and the tags are created when I inspect the browser DOM, but the size of the components is always 0x20.
I’ll appreciate any thoughts on this:
@Tag("svg")
public class Svg extends Component implements HasComponents {
}
@Tag("circle")
public class SvgCircle extends Component {
}
@Route(value = "zzz", layout = ...)
@PageTitle("...")
public class ZZZ extends Div {
public ZZZ() {
setSizeFull();
Svg svg = new Svg();
svg.getElement().setAttribute("width", "100");
svg.getElement().setAttribute("height", "200");
SvgCircle circle = new SvgCircle();
circle.getElement().setAttribute("r", "30");
circle.getElement().setAttribute("cx", "40");
circle.getElement().setAttribute("cy", "60");
circle.getElement().setAttribute("fill", "red");
circle.getElement().setAttribute("stroke-width", "2");
svg.add(circle);
add(svg);
}
}
The ticket says the problem is due to the automatic conversion of attributes to lowercase by the Element API. However, in this example, I don’t see any such attributes.
Yes, I did. This happens only in Templates but something is getting rendered in that case.
In the case mentioned in this thread, nothing is getting rendered (or not visible due to incorrect size of the Element).
I just found out, that those tags where rendered as HTMLElement (Chrome → Inspect → select svg tag → Properties) instead of SVGElement like Vaadin Charts.
If i edit (right click → “Edit as HTML”) the svg tag and add a unrelated div next to it, it seems to force Chrome to re-render the whole svg tag and it gets marked as SVGElement and shows up on the page
Matthias Jobst:
I just found out, that those tags where rendered as HTMLElement (Chrome → Inspect → select svg tag → Properties) instead of SVGElement like Vaadin Charts.
If i edit (right click → “Edit as HTML”) the svg tag and add a unrelated div next to it, it seems to force Chrome to re-render the whole svg tag and it gets marked as SVGElement and shows up on the page
Have u found any workaround to to it in the java to get the svg displayed correctly ?
I have the same problem and need a way to create an show a svg.
The Addon uses a dynamic SVG Image, which is what i’m already doing.
The workaround might work just to display the SVG, but I also need to access the SVG properties, to change colors and so on, which won’t work with that.