i have a problem with the view of a template which has svg elements in it.
The svg circles are displayed not in the (vertical) middle of the element, respectively the
size of the template node doesn't fit for the svg circles (see attachment #2), even if i set it to 5x1 size.
Can anybody help me please, i can't get that problem solved.
If further informations are needed, just let me know.
Thanks in advance!
SVG is tricky.
A workaround here would be to use
cy="50%" but even if it may fix your problem it is wrong way of doing it.
You should define the
viewBox attribute for the
svg element. If you then give correct sizes to
viewBox, then the
svg's internal coordination system works for you as intended and you don't have any surprises.
Thanks! Set the cy="50%" solves the problem.
But yes, i would like to do it the correct way, could you tell me how to handle that in my case with the viewBox attribute?
There is nice article about the
viewBox of the svg. SVG Viewport and viewBox (For Complete Beginners)
Anyway, it takes to know how big is the container where the
svg is placed.
For that let's inspect that element with the browser developer tools.
The width and height - 264px and 48px.
(those numbers may be different if you have different size for widget and group)
In ideal world that would be enough, but here in
ui_template the class
.nr-dashboard-template adds also padding. This padding steals the size from the content so for svg what remains is :
264 - padding-left - padding-right
48 - padding-top - padding-bottom
So define the svg with viewBox using those numbers
<svg viewBox="0 0 252 42">
Now as we know that total height of the svg is 42 (no zooming thus the vewport is default), the vertically centered circle should be
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.