Question

我尝试创建动态构建SVG文档，并希望避免实际编写<rect ...>等。创建SVG文档后，Chrome会显示它有类似{{1}的方法}，createSVGRect()等。前者似乎没有参数，只返回createSVGPoint()对象，只包含属性SVGRect，x，y和{{} 1}}。

奇怪的是，很难找到有关这些方法的文档。 MDN声明：

在任何文档树之外创建SVGRect对象。初始化对象，使所有值都设置为0个用户单位。

它没有说明如何将样式应用于它，或将其插入到SVG DOM中。

所以......如果这不是在SVG文档中创建width元素的方法，那是什么？

（我需要支持IE9 +）

Answer 1

document.createElementNS创建一个SVG元素，因此要创建一个你要写的矩形元素。

var rect = document.createElementNS('https://www.w3.org/2000/svg', 'rect');

上面创建的对象类型是SVGRectElement。

SVGRect对象不是SVG元素，它只是某些SVG DOM方法传入或返回的内容，例如： getBBox。

Answer 2

在SVG上动态绘制橙色矩形

-document.createElementNS创建元素

-<element>.setAttribute为其赋予属性

-svg.appendChild(<element>)，将其添加到DOM上的SVG

<script type="text/javascript">

    var mainSVG = document.querySelector('svg'); 

    var selRectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

    selRectangle.setAttribute('x', 5);
    selRectangle.setAttribute('y', 5);
    selRectangle.setAttribute('width', 20);
    selRectangle.setAttribute('height', 20);
    selRectangle.setAttribute('class', 'selRect');

    mainSVG.appendChild(selRectangle);

</script>


<style type="text/css">

    .selRect{
        fill: orange;
        stroke: orange;
        stroke-width: 2px;
        fill-opacity: 0.1;
        stroke-opacity: 0.7;
    }
</style>

如何使用CreateSVGRect在SVG文档中创建样式矩形？

2 个答案: