Предварительный просмотр SVG с использованием Javascript?

Question

Есть ли простой способ визуализации SVG на странице с использованием JavaScript? Я хочу создать большую текстовую область, в которой пользователь может ввести SVG и нажать кнопку, которая отображает его на странице.

Answer 1

Вы можете использовать DOM для создания элемента SVG в вашем HTML .

Answer 2

Пример кода (набрано, не проверено):

<textarea id="input"></textarea>
<button onclick="fPreview()">preview</button>
<div id="output"></div>

<script type="text/javascript">
function fPreview() {
    var oInput = document.getElementById("input");
    var oOutput = document.getElementById("output");
    // clean preview area
    if (oOutput.firstChild)
        oOutput.removeChild(oOutput.firstChild);
    // parse text into DOM and show it in preview
    var oSVGInput = new DOMParser().parseFromString(oInput.value, "text/xml");
    if (oSVGInput.documentElement)
        oOutput.appendChild(document.importNode(oSVGInput.documentElement));
    else
        oOutput.appendChild("Unknown error");
}
</script>