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 data islands;本文仅讨论xml数据岛并引用mozilla。但是，此方法也适用于chrome和纯文本岛），即。类型script（text/plain）的application/xml标记，其中包含您的html / svg / xml代码。这些部分可通过js访问。有1 1/2个缺点：

需要替换动态内容（在您的情况下：daysLeft变量。
[仅当您使用 xml 数据岛时，例如。对于插入前的预处理]内容需要格式良好的xml。有效的svg将通过设计满足此要求，html不一定。

查看两种变体的实时演示：

传统：see here
纯文本数据岛：see here
xml数据岛：see here

SVG无法在Chrome和Mozilla上显示

1 个答案: