Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG export of label box fails: solid fill and label misalligned #2813

Open
ChrisIdema opened this issue May 11, 2023 · 0 comments · May be fixed by #2846
Open

SVG export of label box fails: solid fill and label misalligned #2813

ChrisIdema opened this issue May 11, 2023 · 0 comments · May be fixed by #2846
Labels
To review

Comments

@ChrisIdema
Copy link

ChrisIdema commented May 11, 2023 •
edited

Expected Behavior

I export a graph which has boxes around the labels to SVG and to PNG. I expect the SVG to match the preview and PNG export. Below is the preview/PNG export.

Current Behavior

In the SVG the boxes have a solid fill instead of a border and the label is too low. The PNG is fine.

Possible Solution

The rectangle can be rendered differently

<rect x="-182.63335" y="209.87682" width="102.83984" height="17.757812" opacity="1.0" style="fill:none;stroke:#000000;"/>

instead of

<rect x="-182.63335" y="209.87682" width="102.83984" height="17.757812" opacity="1.0" fill="#000000"/>

The label should be aligned at the top:

<text font-size="24" x="-131.47319" y="227.35338" fill="#000000" style="text-anchor: middle; dominant-baseline: text-top;" font-family="Arial" class="id_a">

Instead of central:

<text font-size="24" x="-131.47319" y="227.35338" fill="#000000" style="text-anchor: middle; dominant-baseline: central;" font-family="Arial" class="id_a">

As a workarround I used regular expression to do this:

(?<=<rect )fill="(#\d{6})"
style="fill:none;stroke:$1;"

and

dominant-baseline: central
dominant-baseline: text-top

Which results in a better image:

But as you can see the boxes in the preview are slightly wider and significantly taller.
So this isn't a full fix. The width and the height have to be changed too.
And even in the preview the clearance on the right is too small, so that has to be fixed too.

Steps to Reproduce

  1. import this:
 strict digraph G {
	a[label="label for a"];
	b[label="label for b"];
	c[label="label for c"];
	a -> b;
	a -> c:
	a -> d;
}
  1. in Overview: Render (I use Fruchterman Reingold)
  2. In preview: Enable label and label box and set node Opacity to 0
  3. refresh
  4. export to SVG

Context

Your Environment

  • Version used: Gephi 0.10.1
  • Operating System: Windows 11
  • SVG viewer: Chrome and Firefox
@ChrisIdema ChrisIdema changed the title SVG render of label box fails: solid fill and label misalligned SVG export of label box fails: solid fill and label misalligned May 11, 2023
nathanal added a commit to nathanal/gephi that referenced this issue Aug 30, 2023
@nathanal
Improve preview, svg/pdf export of node's label's box (gephi#2813)
52d5ad3 
- Remove text outline's fill (avoids doubling text fill) (svg)
- Boxes no longer have solid fill, but are stroked (svg, pdf)
- Boxes, labels use transparency (svg)
- Non-zero outline size no longer affects box stroke (preview)
- Fix first box size by setting an explicit stroke (preview)
- Box has consistent sharp corners (preview)
- Box size accounts for outline size (all)
- Box matches label position and looks roughly centered (svg)
  dominant-baseline is unsupported by batik at the moment:
  https://xmlgraphics.apache.org/batik/status.html
@nathanal nathanal linked a pull request Aug 30, 2023 that will close this issue
Open
8 tasks
nathanal added a commit to nathanal/gephi that referenced this issue Aug 31, 2023
@nathanal
Improve preview, svg/pdf export of node's label's box (gephi#2813)
fedfa45 
- Remove text outline's fill (avoids doubling text fill) (svg)
- Boxes no longer have solid fill, but are stroked (svg, pdf)
- Boxes, labels use transparency (svg)
- Non-zero outline size no longer affects box stroke (preview)
- Fix first box size by setting an explicit stroke (preview)
- Box has consistent sharp corners (preview)
- Box size accounts for outline size (all)
- Box matches label position and looks roughly centered (svg)
  dominant-baseline is unsupported by batik at the moment:
  https://xmlgraphics.apache.org/batik/status.html
nathanal added a commit to nathanal/gephi that referenced this issue Sep 2, 2023
@nathanal
Improve preview, svg/pdf export of node's label's box (gephi#2813)
01268b2 
- Remove text outline's fill (avoids doubling text fill) (svg)
- Boxes no longer have solid fill, but are stroked (svg, pdf)
- Boxes, labels use transparency (svg)
- Non-zero outline size no longer affects box stroke (preview)
- Fix first box size by setting an explicit stroke (preview)
- Box has consistent sharp corners (preview)
- Box size accounts for outline size (all)
- Box matches label position and looks roughly centered (svg)
  dominant-baseline is unsupported by batik at the moment:
  https://xmlgraphics.apache.org/batik/status.html
nathanal added a commit to nathanal/gephi that referenced this issue Sep 2, 2023
@nathanal
Improve preview, svg/pdf export of node's label's box (gephi#2813)
6a466be 
- Remove text outline's fill (avoids doubling text fill) (svg)
- Boxes no longer have solid fill, but are stroked (svg, pdf)
- Boxes, labels use transparency (svg)
- Non-zero outline size no longer affects box stroke (preview)
- Fix first box size by setting an explicit stroke (preview)
- Box has consistent sharp corners (preview)
- Box size accounts for outline size (all)
- Box size includes descenders (y,g,p, etc) (pdf)
- Box matches label position and looks roughly centered (svg)
  dominant-baseline is unsupported by batik at the moment:
  https://xmlgraphics.apache.org/batik/status.html
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
To review
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

#2813 Improve preview, svg/pdf export of node's label's box nathanal/gephi
1 participant
@ChrisIdema