setAttribute HTML 后多边形未显示

Question

我想在我的 html 代码中动态创建一个三角形，稍后我想对其进行修改和使用。但是从一开始，它就没有出现。

onclick 函数正确触发，新对象出现在 html 中，但对象不可见。

function start_dreiecke() {

    var xmlns = "http://www.w3.org/2000/svg";

    var svg = document.createElementNS(xmlns, "svg");
    var polygon = document.createElementNS(xmlns, "polygon");

    polygon.setAttribute('id', 'triangle_' + '01');
    polygon.setAttribute('style', 'width:200px;height:200px;');
    polygon.setAttribute('points', '1000,779 100,779 550,0');
    polygon.setAttribute("style","fill:yellow;stroke:yellow;stroke-width:1;fill-rule:nonzero;");

    svg.appendChild(polygon);
    document.getElementById('canvas').appendChild(svg);
}

#canvas 
{
    position: absolute;
    width: 100px;
    height:100px;
}

svg
{
    position:absolute;
    height:100px;
    width:100px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>

<h1>Schnittstellendreieck</h1>
<p>Hier ist eine Baustelle für bessere Baustellen.</p>

<!-- Hier werden die Dreiecke generiert. -->

<div id="button">
  <h2 onclick="start_dreiecke()">Start Dreieck</h2>
</div>

<canvas id="canvas"></canvas>
<h3 id="clicked"></h3>

为什么我的三角形没有出现？

Answer 1

A canvas HTML 元素不应该有子元素。这是一种白板，其中线条和形状没有任何 DOM 表示。另一方面，svg 具有 DOM 表示，因此只需删除 canvas 并将 svg 附加到 DOM.[=17= 的其他位置]

function start_dreiecke() {

    var xmlns = "http://www.w3.org/2000/svg";

    var svg = document.createElementNS(xmlns, "svg");
    var polygon = document.createElementNS(xmlns, "polygon");

    polygon.setAttribute('id', 'triangle_' + '01');
    polygon.setAttribute('style', 'width:200px;height:200px;');
    polygon.setAttribute('points', '1000,779 100,779 550,0');
    polygon.setAttribute("style","fill:yellow;stroke:yellow;stroke-width:1;fill-rule:nonzero;");

    svg.appendChild(polygon);
    document.body.appendChild(svg);
}

#canvas 
{
    position: absolute;
    width: 100px;
    height:100px;
}

svg
{
    position:absolute;
    height:500px;
    width:500px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>

<h1>Schnittstellendreieck</h1>
<p>Hier ist eine Baustelle für bessere Baustellen.</p>

<!-- Hier werden die Dreiecke generiert. -->

<button onclick="start_dreiecke()" id="button">Start Dreieck</button>

<h3 id="clicked"></h3>

setAttribute HTML 后多边形未显示

Polygon not showing up after setAttribute HTML

html

javascript

css

svg

shapes