在已经绘制好的 SVG 中绘制答案

【问题标题】：Draw in a SVG that was already drawn在已经绘制好的 SVG 中绘制
【发布时间】：2013-05-04 10:31:47
【问题描述】：

我想知道这是否可行以及如何在已绘制的 SVG 中进行绘制。假设我用 SVG 绘制了一些东西，但我想添加另一个元素，而不是重新绘制所有地图或修改原始 cod。

【问题讨论】：

【解决方案1】：

是的，可以做到。实际上，这是 svg 的优点之一。这是一个例子：

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 SVG demo</title>
    </head>

    <body>
        <h1>SVG DEMO</h1>
        <svg id="circle" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle id="greencircle" cx="30" cy="30" r="30" fill="green" />
        </svg>



        <script type="text/javascript">

            var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            rect.setAttributeNS(null,"id", "myrect");
            rect.setAttributeNS(null,"fill", "red");
            rect.setAttributeNS(null,"stroke", "black");
            rect.setAttributeNS(null,"stroke-width", "5");
            rect.setAttributeNS(null,"x", "100");
            rect.setAttributeNS(null,"y", "100");
            rect.setAttributeNS(null,"width", "100");
            rect.setAttributeNS(null,"height", "50");
            var svg = document.getElementById("circle");
            svg.appendChild(rect);


        </script>
    </body>
</html>

【讨论】：