如何在IE9中垂直居中SVG文本

为了在SVG中垂直对齐文本，必须使用dominant-baseline属性。这已经在SO（Aligning text in SVG）上讨论过，并且是the specification的一部分。如何在IE9中垂直居中SVG文本

我的问题是与IE9显然does not support dominant-baseline和一堆other things。

对IE9中的如何近似dominant-baseline: central有什么建议吗？

这是一个在FF和Chrome中可用的示例。它在IE9，Opera 11中不起作用.Windows上的Safari不支持central，但支持middle，这仍然很好。

<?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>

来源

2011-04-01 Tsvetomir Tsonev

这是一个巨大的黑客，但我们可以通过考虑字体大小来估计垂直中间位置。

该规范定义central那样：

中央

这标识所计算的基线，其在所述EM框的中心。

我们可以采用已知字体大小的EM box并测量其边界框来计算中心。

<?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>

很明显，代码可以更清洁，但这只是一个概念验证。在IE中来完成此

来源

2011-04-01 13:03:35

你可以尝试基线漂移，看看是否能在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>

火狐似乎并不支持基线漂移，虽然，但WebKit和歌剧做。

来源

2011-04-01 09:20:18

它似乎也不支持基线移位。 “-30％”值在支持它的浏览器中诀窍。 – 2011-04-01 12:11:12

的一种方法是设定与字体的大小的位置：

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

设置“DY”属性将文本上移（如果值为负）或下（如果值是正数）。在IE中设置“text-anchor”属性使X轴上的文本居中。虽然这可能会令人讨厌，但IE对SVG的支持也是如此！

来源

2015-03-17 00:08:06 whyoz

最后，没有一个页面充满JavaScript黑客的作品，谢谢！不过，0.3em的值似乎更适合。 – Gigo 2015-10-27 00:32:16

这个很好用！ – c9s 2016-05-27 06:52:44

不幸的是，我没有找到一个很好的方法来检测当前浏览器是否支持SVG'dominant-baseline'，所以我不得不检查'User-Agent'字符串（yuck）。还有其他建议吗？ – 2016-10-27 14:49:22

如何在IE9中垂直居中SVG文本

回答

相关问题