SVG无法在Chrome和Mozilla上显示

Question

作为标题，下面的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> ");

怎么了？

Answer 1

不允许将换行符用作JS字符串内的文字，但必须使用\\n进行编码。

为了提高可读性，从而提高可维护性，我建议将字符串分成几行，将它们连接到最终代码中，或者一行一行地编写它们。

如果这样做，动态内容在chrome 34和firefox 28中的显示效果非常好（直到文本框的尺寸不正确）。

还有一种替代解决方案，允许您以规范的方式隐藏文档片段的词汇表示。 为此，请使用数据岛（原始资源：MDN上的xml数据岛 ；本文仅讨论xml数据岛，并引用了mozilla。但是，该方法在chrome和纯文本岛中也适用）。 类型为text/plain （ application/xml ）的script标签，其中包含您的html / svg / xml代码。 这些部分可以通过js访问。 有1 1/2缺点：

• 动态内容需要替换（在您的情况下： daysLeft变量。
• [仅当您使用xml数据岛时，例如。 以便在插入之前进行预处理]内容需要采用格式正确的xml。 有效的svg可以通过设计满足此要求，而html则不一定。

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

• 传统： 请看这里
• 纯文本数据岛： 请参见此处
• xml数据岛： 请参见此处