javascript - 绘制一个已经绘制好的 SVG

标签 javascript css html svg

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

最佳答案

是的,这是可以做到的。实际上,这是 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>

关于javascript - 绘制一个已经绘制好的 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16373322/

相关文章:

javascript - 如何自定义当前页面名称在我的菜单中的显示方式?

javascript - 应用 js 的多个背景图像仅应用第一个

php - Prestashop 在主页中编辑元标记

html - CSS - 如何在圆形图像周围添加圆形边框/轮廓?

javascript - 如何检测 "device mode"(MVC3 + Bootstrap)

javascript - 跳转到页面某段的哈希索引截取了部分内容

javascript - Spring Boot 复选框阵列未按预期工作

javascript - 是否可以将 Canvas ID 的宽度和高度属性设置为窗口大小的 90%?

php - 用于替换单词的jquery代码

html - Bootstrap : Navigation points should stack in mobile view and padding inside navigation points should not overlap