javascript - 使用 Javascript 预览 SVG？

Question

有没有一种简单的方法可以使用 javascript 在页面内呈现 SVG？我想要做的是设置一个大的文本区域，用户可以在其中键入 SVG 并单击在页面上呈现它的按钮。

Answer 1

您可以使用 DOM在 HTML中创建SVG 元素。

Answer 2

代码示例（已输入，未验证）：

<textarea id="输入"></textarea>
<button onclick="fPreview()">预览</button>
<div id="输出"></div>

<script type="text/javascript">
函数 fPreview() {
    var oInput = document.getElementById("input");
    var oOutput = document.getElementById("输出");
    // 清理预览区域
    如果（oOutput.firstChild）
        oOutput.removeChild(oOutput.firstChild);
    // 将文本解析为 DOM 并在预览中显示
    var oSVGInput = new DOMParser().parseFromString(oInput.value, "text/xml");
    如果（oSVGInput.documentElement）
        oOutput.appendChild(document.importNode(oSVGInput.documentElement));
    别的
        oOutput.appendChild("未知错误");
}
</脚本>