C# 使用JSInterop在blazor中呈现SVG元素_C#_Svg_Blazor

C# 使用JSInterop在blazor中呈现SVG元素

c# svg blazor

C# 使用JSInterop在blazor中呈现SVG元素,c#,svg,blazor,C#,Svg,Blazor,我需要在blazor中呈现svg中的文本元素、行元素等。因此，我创建了一个jSinterop来执行此操作，以便在必要时调用js方法。我的代码片段 .razor 已调用此js方法，但文本元素未附加到DOM。通过此方法进行调试时，可以看到附加到DOM的元素。之后，它被移除。我找不到它被删除的位置。在svg中，您必须设置元素的位置： <script> function insertElements() { let parent = document.getEl

我需要在blazor中呈现svg中的文本元素、行元素等。因此，我创建了一个jSinterop来执行此操作，以便在必要时调用js方法。我的代码片段

.razor

已调用此js方法，但文本元素未附加到DOM。

通过此方法进行调试时，可以看到附加到DOM的元素。之后，它被移除。我找不到它被删除的位置。

在svg中，您必须设置元素的位置：

  <script>

    function insertElements() {
      let parent = document.getElementById("parent");

      for (let i = 0; i < 5; i++) {
        let text = document.createElementNS('http://www.w3.org/2000/svg', "text");
        text.setAttribute("x", 10);
        text.setAttribute("y", 10 + 15 * i);
        text.style.fill = "blue";
        text.textContent = "text " + i;
        parent.insertAdjacentElement("afterbegin", text);
      }

    }

    function test() {
      insertElements();
    }

  </script>
</head>
<body>

  <button onclick="test()">Test</button>
  <svg id="parent" width="200" height="200">
  </svg>

</body>


函数插入元素（）{
让parent=document.getElementById（“parent”）；
for（设i=0；i<5；i++）{
让text=document.createElements（'http://www.w3.org/2000/svg","文本";；
text.setAttribute（“x”，10）；
text.setAttribute（“y”，10+15*i）；
text.style.fill=“蓝色”；
text.textContent=“text”+i；
parent.insertAdjacentElement（“afterbegin”，text）；
}
}
功能测试（）{
插入元素（）；
}
试验

你为什么需要JS？你不能用C#/Blazor生成元素吗？是的，我也可以用Blazor生成元素。我只需要检查blazor和JS的svg渲染性能。所以我就这样检查。

window.elementText = function () {
    var svgElement = this.document.getElementById('parentElement');
    var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');   
    text.setAttribute('fill', 'black');
    text.textContent = 'hello world';
    svgElement.insertAdjacentElement('afterbegin', text)
}

  <script>

    function insertElements() {
      let parent = document.getElementById("parent");

      for (let i = 0; i < 5; i++) {
        let text = document.createElementNS('http://www.w3.org/2000/svg', "text");
        text.setAttribute("x", 10);
        text.setAttribute("y", 10 + 15 * i);
        text.style.fill = "blue";
        text.textContent = "text " + i;
        parent.insertAdjacentElement("afterbegin", text);
      }

    }

    function test() {
      insertElements();
    }

  </script>
</head>
<body>

  <button onclick="test()">Test</button>
  <svg id="parent" width="200" height="200">
  </svg>

</body>