Javascript SVG无法在Chrome和Mozilla上显示

作为标题，以下SVG不能在Chrome和Mozilla中显示

下面是我的代码：

document.write("<span style='color:red;'>Some Words...</span>
                <svg height='100' width='100'>
                     <circle cx='50' cy='40' r='35' stroke='black' stroke-width='0' fill='#01916f' />
                </svg>
                <svg height='35' width='50'>
                     <text x='-80' y='-8'  span style='font-weight:bold;font-size:50px;' fill='white'>" + daysLeft + "</text>
                </svg> 
                <svg height='60' width='50'>
                     <text x='-60' y='7'><tspan dy='10' fill='red'>more days to go!</tspan></text>
                </svg> ");

document.write（“一些单词。。。
“+daysLeft+”
还有更多的日子！
");

---

怎么了？

换行符不允许作为JS字符串中的文字，但必须使用

\n

进行编码

为了提高可读性和可维护性，我建议将字符串拆分为单独的行，将它们连接到最终代码中，或者逐行编写它们

如果您这样做，您的动态内容在Chrome34和Firefox28中显示得非常好（直到文本框的尺寸标注不正确）

有一种替代解决方案允许您以规范的方式隐藏文档片段的词汇表示。为此，请使用数据岛（原始来源：在MDN上；本文仅讨论xml数据岛，并参考mozilla。但是，该方法在chrome和纯文本岛中也适用），即包含html/svg/xml代码的

script

类型的标记

text/plain

（

application/xml

）。这些部分可以通过js访问。有1/2的缺点：

• 需要替换动态内容（在您的情况下：

  daysLeft

  变量）
• [仅当您使用xml数据孤岛时，例如用于插入前的预处理]内容需要是格式良好的xml。有效的svg将通过设计满足这一要求，html不一定满足这一要求

查看两种变体的现场演示：

• 传统的：
• 纯文本数据孤岛：
• xml数据孤岛：

---

当我在chrome和Mozilla上查看实时演示时，它不起作用。它们在chrome 34、ff 28和ios上运行良好。部分文本不显示，但这是由于文本框的尺寸。您在控制台上收到任何消息（例如chrome中的ctrl+j）？经过一些修改后，我已经得到了我想要的结果，但目前我面临的一些文本没有显示如你所说的框的尺寸，如何修改包含我的圆圈的文本框？因为我发现似乎一个透明的方形框覆盖了我的文字。