Internet Explorer和tspan垂直对齐 [英] Internet Explorer and tspan vertical alignment

问题描述

要在SVG中的文本元素内垂直对齐 tspan 元素，CSS属性 alignment-baseline 和 dominant-baseline 分别在Chrome和FF中很好地工作。到目前为止这么好。

使用Internet Explorer有点疯狂：

• 开放的
  
  

  最终呈现方式相同：
  
  

  
  

  To vertically align a tspan element inside a text element in SVG, the CSS properties alignment-baseline and dominant-baseline work great in Chrome and in FF, respectively. So far so good.

  With Internet Explorer it gets a bit crazy:

  • an open bug report asserts that these properties do not work for IE9-11 ...
  • ... but the official documentation states that alignment-baseline is supported
  • CSS feature-sniffing in IE9 & IE11 reports that they support alignment-baseline as well as dominant-baseline for tspan, but they do not work with any values
  • to add confusion to frustration, this MSDN dev page simply says both properties are currently unsupported

  This wouldn't be such an issue for IE9 (one could simply hack the desired alignment), but since I want to get away from browser detection, I would like to know:

  • is there a workable cross-browser solution?
  • how come even IE11 doesn't support this basic SVG styling property and how to work around that?

  Thanks!

  解决方案

  I have no idea why IE doesn't support alignment-baseline, let alone why you're getting such mixed information.

  You can sort of hack the same behaviour using the dy attribute and font-based units ("em" and "ex"). It works pretty well if you just want to center a specific text element on a point.

  <text x="50%" y="50%" dy="0.5ex" text-anchor="middle">
      This text will be centered in your coordinate system!
  </text>
  

  But the problem with dy is that -- unless y is also set explicitly for the same element -- it is calculated relative to the position of the previous character. So if you want to center a text span relative to the surrounding spans, you have to first adjust for any previous offset and then set the new offset. The resulting code isn't pretty:

  <text x="50%" y="25%" font-size="150%">
      <tspan dy="0.5ex">Large font with</tspan><tspan 
          dy="-0.5ex">&nbsp;<tspan
          font-size="50%" dy="0.5ex">small font<tspan
          dy="-0.5ex">&nbsp;</tspan></tspan></tspan><tspan 
      dy="0.5ex">embedded.</tspan>
  </text> 
  <text x="50%" y="75%" font-size="75%">
      <tspan dy="0.5ex">Small font with</tspan><tspan 
          dy="-0.5ex">&nbsp;<tspan
          font-size="200%" dy="0.5ex">large font<tspan
          dy="-0.5ex">&nbsp;</tspan></tspan></tspan><tspan 
      dy="0.5ex">embedded.</tspan>
  

  http://fiddle.jshell.net/awj49/

  Rendering in IE11:

  
  (gray lines mark the reference y coordinate)

  If you can, it makes much cleaner code to just explicitly set the y attribute on each tspan:

  <text x="50%" font-size="150%">
      <tspan y="25%" dy="0.5ex">Large font with</tspan>
      <tspan font-size="50%" y="25%" dy="0.5ex">small font</tspan>
      <tspan y="25%" dy="0.5ex">embedded.</tspan>
  </text> 
  <text x="50%" y="75%" font-size="75%">
      <tspan y="75%" dy="0.5ex">Small font with</tspan>
      <tspan font-size="200%" y="75%" dy="0.5ex">large font</tspan>
      <tspan y="75%" dy="0.5ex">embedded.</tspan>
  </text>    
  

  http://fiddle.jshell.net/awj49/1/

  The final rendering is the same:
  

  这篇关于Internet Explorer和tspan垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！