Question

我正在做一个SVG，我需要显示一个度量，我想使用write-mode垂直放置文本：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/

Answer 1

vertical text in d3 (not rotated)

可能重复

从那里引用：

'write-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;});

SVG文本元素，属性writing-mode：tb，在Firefox中不起作用

1 个答案: