针对Android的Chrome解决方案缺乏SVG First-Letter支持

Question

背景

Android版Chrome不支持first-letter元素的CSS text选择器。我创建了一个非常简单的SVG来演示这个问题。在桌面浏览器上，您会看到通过first-of-type和first-letter选择器创建的三种尺寸的文字。在Firefox for Android上你会看到同样的事情。但是在Chrome上，只会显示两种尺寸。

---

CODE

CSS：

text {
  font-size:50px;
}
text:first-of-type {
  font-size:70px;
}
text:first-letter {
  font-size:90px;
}

HTML：

<svg version="1.1" baseProfile="full" width="520" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <text x="0" y="80">MY WORDS</text>
  <text x="0" y="160">MY WORDS</text>
</svg>

现场结果：

Caption http://codepen.io/Kelderic/pen/jefuq.svg

来自CHROME（ANDROID）的SCREENSHOT：

---

问题

我的问题是，除了将单词拆分为多个text元素并将大小应用于每个元素之外，还有其他简单的解决方法吗？

Answer 1

你可以使用foreignObject，这样它只适用于支持它的UAs。不幸的是，这意味着支持foreignObject的Firefox获取了html代码，但也许没问题。

<svg version="1.1" baseProfile="full" width="520" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <switch>
      <foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" width="520" height="200">
          <div>MY WORDS</div>
          <div>MY WORDS</div>
      </foreignObject>
      <g>
          <text x="0" y="80">MY WORDS</text>
          <text x="0" y="160">MY WORDS</text>
      </g>
  <switch>
</svg>