21

In order to align text vertically in SVG one has to use the dominant-baseline attribute. This has already been discussed on SO (Aligning text in SVG) and is part of the specification.

My problem is with IE9 which apparently does not support dominant-baseline and a bunch of other things.

Do you have any ideas on how to approximate dominant-baseline: central in IE9?

Here is a sample that works in FF and Chrome. It does not work in IE9, Opera 11. Safari on Windows doesn't support central, but supports middle which is still good.

<?xml version="1.0"?>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 100 h 290" stroke="blue" stroke-width=".5" />
    <text x="40" y="100" font-size="16" style="dominant-baseline: auto;">
        XXX dominant-baseline: auto; XXX
    </text>

    <path d="M 10 200 h 290" stroke="blue" stroke-width=".5" />
    <text x="40" y="200" font-family="sans-serif" font-size="15" style="dominant-baseline: central;">
        XXX dominant-baseline: central XXX
    </text>
</svg>

3 Answers 3

13

One way to accomplish this in IE is to set the position related to the size of the font:

<text font-size="WHATEVER YOU WANT" text-anchor="middle" "dy"="-.4em"> M </text>

Setting the "dy" attribute will shift the text up (if value is negative) or down (if value is positive). Setting the "text-anchor" attribute centers the text on the x axis just fine in IE. Although this might hackish, but so is IE's support of SVG!

5
  • 4
    Finally something that works without a page full of javascript hacks, thanks! A value of 0.3em seems to be a better fit, though.
    – Gigo
    Oct 27, 2015 at 0:32
  • 1
    Unfortunately, I didn't find a good way to top detect whether SVG dominant-baseline is supported in the current browser, so I was forced to check the User-Agent string (yuck). Any other suggestions? Oct 27, 2016 at 14:49
  • 3
    @ChristopherSchultz this is one of those "close enough" solutions that we as devs need to afford ourselves from time to time so we don't have to spend hours doing things that jeopardize sanity. So nope...haven't thought about it since March of 2015! For sure report back if you figure something out for anyone else that visits.
    – whyoz
    Oct 27, 2016 at 20:01
  • Great solution!
    – yadejo
    Oct 30, 2018 at 7:58
  • 2
    still checking User-Agent in 2019
    – Gordon
    Jan 25, 2019 at 0:52
5

This is a giant hack, but we can approximate the vertical middle position by taking the font size into account.

The specification defines central like that:

central

This identifies a computed baseline that is at the center of the EM box.

We can take an EM box of known font size and measure its bounding box to compute the center.

<?xml version="1.0"?>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 100 h 290" stroke="blue" stroke-width=".5" />
    <text id="default-text" x="20" y="100" font-size="5em">
        M
    </text>
    <script>
        window.onload = function() {
            var text = document.getElementById("default-text"),
                bbox = text.getBBox(),
                actualHeight = (100 - bbox.y),
                fontSize = parseInt(window.getComputedStyle(text)["fontSize"]),
                offsetY = (actualHeight / 2) - (bbox.height - fontSize);

            text.setAttribute("transform", "translate(0, " + offsetY + ")");
        }
    </script>

    <path   d="M 10 200 h 290" stroke="blue" stroke-width=".5" />
    <text   id="reference-text" x="20" y="200" font-size="5em"
            style="dominant-baseline: central;">
        M
    </text>
</svg>

Obviously, the code can be much cleaner, but this is just a proof-of-concept.

4

You could try baseline-shift to see if that works in IE9:

<?xml version="1.0"?>
<svg width="300" height="500" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 100 h 290" stroke="blue" stroke-width=".5" />
    <text x="40" y="100" font-size="16" style="dominant-baseline: auto;">
        XXX dominant-baseline: auto; XXX
    </text>

    <path d="M 10 200 h 290" stroke="blue" stroke-width=".5" />
    <text x="40" y="200" font-family="sans-serif" font-size="15" style="dominant-baseline: central;">
        XXX dominant-baseline: central XXX
    </text>

    <path d="M 10 300 h 290" stroke="blue" stroke-width=".5" />
    <text x="40" y="300" font-family="sans-serif" font-size="15">
      <tspan style="baseline-shift:-30%;">
        XXX baseline-shift: -30% XXX
      </tspan>
    </text>
</svg>

Firefox doesn't seem to support baseline-shift though, but Webkit and Opera do.

1
  • It doesn't seem to support baseline-shift either. The "-30%" value does the trick in browsers that support it. Apr 1, 2011 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.