Welcome to yEd Q&A!
Here you can ask questions and receive answers from other members of the community and yEd developers. And you can tell us your most wanted feature requests.

Categories

Kubernetes SVG icons imported wrong

0 votes

Hi,

When importing labeled Kubernetes SVG icons, text on them is not centered as is supposed to be. Is there a workaround?

P.S. yEd version 3.22 on MacOS.

in Help by
edited

1 Answer

0 votes
 
Best answer

The Kubernetes SVG icons use text-anchor:middle; in the CSS styles for <tspan> elements (together with text-align:center) to center the corresponding text, e.g.
<tspan
 ...
 style="...;text-anchor:middle;..."
 ...>c-role</tspan>

However, text-anchor is not a CSS property but an SVG attribute. The proper (and working) usage for text-anchor would be
<tspan
 ...
 style="..."
 text-anchor="middle"
 ...>c-role</tspan>

Strictly speaking, the Kubernetes SVG icons do not conform to the SVG and CSS specifications. The Apache Batik toolkit that yEd uses for displaying SVG documents on the other hand strictly adheres to the SVG and CSS specifications and thus ignores the invalid CSS property.

The only fix for this problem is correcting all the Kubernetes SVG documents to properly use text-anchor as an SVG attribute instead of a CSS property.

E.g. compare this corrected icon with the original one.

by [yWorks] (160k points)
Amazing! Thanks a lot for this in-depth answer!
Legal Disclosure | Privacy Policy
...