Inkscape Text Boxes

[jd1]

So I know this isn't 100% ignition related but I have scoured the interwebs with no success.
Here is my issue. I create a square in inkscape, I add a textbox on top of that square. I save it using the recommendations here:

Recommendations for svg editor

I’ve been using “Optimized SVG” in Inkscape to preserve gradients, then use @heybales advice to resize and embed the image. [image] [image]

I then embed the svg into a view in ignition. My colored square show up just fine, but no text is displayed. There is a text element in the property browser.

So then I download the SVG that was shared here to inspect it.

Perspective Equivalent Vision Level Indicator?

You could take it one step further… If you create an svg drawing and clip one of the filled objects you can do something like this [fill animation] I created an svg file in inkscape by drawing a shape and duplicating it. One shape is gradient filled and the other shape just has stroke defined (no fill) as the outline. Then added a text object too. In perspective designer, afer dropping the svg onto a view (embedded), I added the ‘style’ property to the svg’s gradient filled object (elemen…

And here is where I found the difference in the svg code.

<text transform="translate(58.807 49.039)" x="4.1963849" y="53.20747" fill="#000000" font-family="sans-serif" font-size="10.583px" letter-spacing="0px" stroke-width=".26458" word-spacing="0px" style="inline-size:57.2399;line-height:1.25;white-space:pre" xml:space="preserve"><tspan x="4.1963849" y="53.20747"><tspan stroke-width=".26458">Fill Volume</tspan></tspan></text>
<text transform="matrix(1.5361 0 0 1.5221 -31.229 -64.751)" fill="#000000" font-family="sans-serif" font-size="10.583px" style="line-height:1.25;shape-inside:url(#rect2945);white-space:pre" xml:space="preserve"><tspan x="65.646484" y="122.86765"><tspan>Value</tspan></tspan></text>

The top line is the text box that work, the bottom one does not.
So my question is what I am doing wrong in inkscape, or am I going to have to edit all of my svgs by hand that I want to have text.

[nminchin]

I think you should be enabling viewboxing. May not solve your issue, but it solved some of mine when I first started using perspective. I should probably look more into it though…

[Alistair]

Hi JD and Nick,
I’m going around in circles on this topic at the moment. I feel I’m close, just one click away…?!
I can see the text key in the element tree in Designer, but I don’t see the text on the view.
I have the matrix transform rather than the translate.
Did you guys work this out?
Thanks,
Alistair

[nminchin]

Do you have view box enabled?

[Alistair]

If you mean ticking the check box in the SVG output in Inkscape like in your post above, yes.
I must be doing something cabbage.

[Alistair]

Stand down. I got it working. I created the svg on a different computer.
The transform is coming through with translate, rather than matrix.
Now I’m trying to figure out what the difference is at the Inkscape end…
Thanks.

[Alistair]

Ok, I’ve learnt a few things, but I haven’t got to the bottom of this.
I’m going to go against my normal philosophy of 'Tis better to keep your mouth shut and remain a fool, than open it and remove all doubt… in the hope that someone may point me in the right direction.

In Inkscape, using the Text edit tool and clicking and dragging to make a text box, it will create a matrix transform which you can see in the XML editor tab:

If you just click and release to create a default size text box, it doesn’t create any transform node.
If you move the text around with the cursor, it will change the x and y nodes for the text.
If you change the size with the handles, it will add a scale transform.
If you go back to the first version with the matrix transform, and you delete that node, the text will move and change size. Then if you drag it, it will add a translate transform. If you resize by dragging it, it will change back to a matrix transform.

Why does this matter?

If I create a single text object in Inkscape, resize the page to the drawing, save it as an Optimized SVG, and open it in a browser, it will be in the top left corner and looks fine.
If I drag it into Perspective designer and embed it, I can see a part of the text, but it is cut off. You can move the text around by editing the transform: translate(10 20) (example values) or you can move the viewBox around from say (0 0 100 100) to (-100 -100 100 00). But why?

The situation gets worse when you add some other bits in. If I drew some rectangles and put some text on top, it would look fine in a browser, but when I imported it into Designer, I could see the rectangles, but couldn’t see the text. It turns out, if I opened up the viewBox, the text had slipped out of view. I could edit the translate transform and move the text to where I wanted it.

So what’s the problem with the matrix transform? If you leave it as matrix, and you do find the text has slipped away from where you thought it should be, good luck getting it back to where you wanted it. If you change it to the translate transform, you can just edit the x and y values.

I also find the text is a different scale than it was drawn in Inkscape.

Sometimes the value in the text node gets scrubbed from the svg output when you use Optimized SVG, so you have to add it back, in the Designer element tree.

I still haven’t figured out why the text is behaving differently than the rectangles, but at least I can fix it by tweaking the translate transform.

Does anyone have any ideas what I’m doing wrong? Thanks.

[victordcq]

Idk about inkscape but if you provide some svgs from it, then i can take a look why perspective is acting different.
Anyways using transforms and matrixes seems kinda overkill for a textbox.

[Alistair]

I drew a simplified version to demonstrate the problem and made a new discovery (for me) along the way.
I was creating a union of the rectangles in Inkscape, so I could change the fill in one place, rather than for every single drawing element individually. This worked ok in Designer, but gave me the text problem.

I originally tried creating a group, but the fill was still individual per rectangle.
However, when I followed @nminchin 's advice on creating the group, then with the group selected, changing the fill, Inkscape adds the fill to the group. When I embed this in designer, it works as expected. What was not expected, was the text appeared where it should!

I’ve attached two examples. Bin with union.svg for some reason doesn’t have the tspan element after saving the optimized SVG.
Bin with group.svg was saved using the same optimized SVG settings, yet it does have the tspan element and everything works almost as it should! The only difference is the text is slightly larger in Ignition, but I can add a style to correct that.

(Ugly drawings for example only!)

[victordcq]

Heh glad it worked out!