Home/ Questions/Q 6901259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T07:39:03+00:00

I have a SVG object (generated with RaphaelJS) which shows correctly when inserted in

  • 0

I have a SVG object (generated with RaphaelJS) which shows correctly when inserted in one HTML page.

When creating the same SVG using the same code in a different page, text appears incorrectly aligned in vertical.

I have checked all styles and attributes affecting SVG and the HTML containing the diagram, but I haven’t found any significant difference. Also, I thought that SVG should not be affected by the CSS rules of parent HTML elements.

Here is a picture of the issue. On the left, the correctly rendered diagram. On the right, the text appears incorrectly aligned (not centered). These two SVG objects appear in different iframes of the same document (I have put them together for the picture).

SVG text alignment issues

Edit: I have noticed that the Y coordinates of text elements are indeed different:

<!-- Incorrect -->
<text x="362" y="71" text-anchor="end" style="font: normal normal normal 10px/normal Arial; text-anchor: end; " stroke="none" fill="#000000"><tspan>MQ</tspan></text> 
<!-- Correct -->
<text x="362" y="74.5" text-anchor="end" style="font: normal normal normal 10px/normal Arial; text-anchor: end; " font="10px &quot;Arial&quot;" stroke="none" fill="#000000"><tspan>MQ</tspan></text>

Any idea?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    SVG elements in the same document (which is the case if you use Raphaël) do get CSS applied from its parents, as well as stylerules from stylesheets used in that document that happen to target svg elements.

    Have you tried using a debugging tool such as opera dragonfly, webkit inspector or mozilla firebug to inspect what styles are being applied to those text elements?

    At least the following properties would affect the text baseline:

    • dominant-baseline
    • alignment-baseline
    • baseline-shift
    • 0