SVG 文本元素，属性写入模式：tb，在 Firefox 中不起作用答案

【问题标题】：SVG text element, property writing-mode: tb, does not work in FirefoxSVG 文本元素，属性写入模式：tb，在 Firefox 中不起作用
【发布时间】：2014-08-20 13:30:23
【问题描述】：

我正在做一个 SVG，我需要显示一个度量，我想垂直放置文本，使用写作模式：tb;在 chrome、IE、Opera 和 Safari 中一切都很完美，但在 Firefox 中文本显示为水平的。

<svg version="1.1" viewBox="100,100" preserveAspectRatio="xMidYMin">
    <style type="text/css">
        .cota-text {
          fill: #000;
          font-size: 10px; 
          text-anchor: middle;
        }

        .cota-vertical { 
            writing-mode: tb; 
        }
     </style>
     <text x="10" y="10" class="cota-text cota-vertical">TEXT</text>
</svg>

我不知道是什么导致了这个问题。有人可以帮我解决问题吗？

小提琴：

http://jsfiddle.net/yf4nduob/1/

【问题讨论】：

vertical text in d3 (not rotated)的可能重复

标签： firefox text svg cross-browser

【解决方案1】：

vertical text in d3 (not rotated)的可能重复

从那里引用：

'writing-mode' 属性应该改变第一个方面而不影响其他方面，但正如您发现的 it's not implemented at all in Firefox，而 IE 旋转文本但不遵守水平字形规则。

以下是从同一答案get vertical text in SVG though cross-browser 的三种可能方式。

其中：

//Blue text, uses d3 to create a series of tspans//
svg.append("text")
  .attr("x", 40)
  .attr("y", 40)
  .attr("font-size", 50)
  .attr("id", "title")
  .style("fill", "blue")
  .attr("transform", "translate(300,0)")
  .attr("text-anchor", "middle")
  .selectAll("tspan")
      .data("Top 100 Mentions".split(""))
  .enter().append("tspan")
      .attr("x", 0)
      .attr("dy", "0.8em")
      .text(function(d){return d;});

【讨论】：