How center text in an embedded SVG?

General Discussion
1

(This is for a perspective in 8.1.15)

So I am experimenting with with custom SVGs. I created a simple button face plate that looks like this:

Screen Shot 2022-03-23 at 3.19.11 PM

Each line of text is a separate text element.

The contents of the SVG are:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 284 511" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g id="BasePlate">
        <circle id="Circle" cx="141.732" cy="368.504" r="141.732" />
        <rect id="Outline" x="0" y="-0" width="283.465" height="368.504" />
        <rect id="Inset" x="14.173" y="14.173" width="255.118" height="192.756" style="fill:#fff;" />
    </g>
    <g id="Text">
        <text id="Text1" x="17.523px" y="51.69px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum xx</text>
        <text id="Text2" x="17.523px" y="85.29px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum xx</text>
        <text id="Text3" x="17.523px" y="119.13px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum xx</text>
        <text id="Text4" x="17.523px" y="152.73px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum xx</text>
        <text id="Text5" x="17.523px" y="186.33px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum xx</text>
    </g>
</svg>

I dragged this image into a perspective view and successfully linked parameters to the text elements.

But within Ignition I wanted to format the text as centered. So I drilled down to the contents of the SVG and applied a center format like so:

Screen Shot 2022-03-23 at 3.12.39 PM

But the text remains left justified:

Screen Shot 2022-03-23 at 3.15.27 PM

Is it possible to do what I want, and justify the text from within Ignition, or can I only do this by applying some sort of justification directly in the SVG (and if so, how)?

2

Hey @peter,

Maybe this is what you’re looking for? Let me know if this works or not: text-anchor - SVG: Scalable Vector Graphics | MDN

3

I can see how that works by changing where the X/Y coords are with respect to the text. I’m guessing that is probably the best I can do within the SVG itself.

I just found find this: How to place and center text in an SVG rectangle and that starts to get way too complicated for me!

Of course I just discovered that my SVG editor of choice (Affinity Designer) doesn’t support “text-anchor” … :face_with_symbols_over_mouth:. So every time I want to edit my master SVG project I’ll have to manually manipulate the text-anchor of the exported SVG (and yes I know about Inkscape)

4

Hi @ayu I’m taking back my solution check. It looks like Perspective doesn’t respect the “text-anchor”.

Here is a subset of my new SVG file

<text id="Text1" x="141.732px" y="51.69px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren</text>

The x coordinate is set to be the middle of the image.

And here is what the file looks like dragged into a Perspective view:

Screen Shot 2022-03-23 at 4.40.14 PM

So you can see the text has been located to the middle of the image, but it is still left aligned.

But if I open the image directly in my browser I see this:

Screen Shot 2022-03-23 at 4.42.29 PM

5

Hey @peter,

Yea that look’s odd. Looks like this may be a potential bug in Perspective. Would you mind posting your test SVG so I can take a look at how the attributes are being applied?

6

Here is the latest image.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 284 511" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g id="BasePlate">
        <circle id="Circle" cx="141.732" cy="368.504" r="141.732" />
        <rect id="Outline" x="0" y="-0" width="283.465" height="368.504" />
        <rect id="Inset" x="14.173" y="14.173" width="255.118" height="192.756" style="fill:#fff;" />
    </g>
    <g id="Text">
        <text id="Text1" x="141.732px" y="51.69px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren</text>
        <text id="Text2" x="141.732px" y="85.29px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren</text>
        <text id="Text3" x="141.732px" y="119.13px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum</text>
        <text id="Text4" x="141.732px" y="152.73px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum</text>
        <text id="Text5" x="141.732px" y="186.33px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum</text>
    </g>
</svg>

As you can see the x coord of the text is same as the cx coord of the circle.

Given that my editor of choice doesn’t support creating the text-anchor, I may take the less painful path and just slap the text into the view from within Perspective.

7

Hey @peter,

It looks like the text-anchor attribute doesn’t get applied during import or when adding the property value manually. I will file a ticket for this bug. This is a bit tedious but as a workaround you can add the attribute textAnchor: middle to the style object of the text element like so:

textAnchor
textAnchor1483Ă—852 40.9 KB

8

Thanks for that! And I’ll add another notch to my bug count!

9

We should get a badge to track our bug count.

3 Likes
10

Well text-anchor is a style but is not inside the style string.
i think if you move it in there than the designer will recognize it.

11

My understanding is that text-anchor is an attribute, but that text-align is a style.

And in hindsight I may actually be wanting to use text-align. I’ll have to test that today.

12

Ah hm, yes they are both an svg attribute and style, seems igntion only will recognize it as a style.(probably)
And im guessing most svg editors will put it as an attribute :frowning:

text-align wont work in svg

you already tested that yesterday xp

13

I’m glad to find this workaround to center text, but is there a bug fix in the works to apply the textAnchor attribute in an embedded SVG? I am using 8.1.18 and still have this issue.