Визуализация SVG-элементов в Blazor с использованием JSInterop - PullRequest
Новая
       10

Визуализация SVG-элементов в Blazor с использованием JSInterop

3 голосов
/ 10 июля 2020

Мне нужно отобразить текстовые элементы, элементы строки и т. Д. c в svg в blazor. Итак, я создал jSinterop для выполнения этих операций, чтобы я мог вызывать методы js везде, где это необходимо. Мой фрагмент кода:

.razor 

@inject IJSRuntime JsInterop

<svg id="parentElement">
    @for (var i = 0; i < count; i++)
    {
        @RenderTextElements()
    }
    </svg>

@code { 
int count = 10;
public object RenderTextElements()
{
    return (JsInterop.InvokeAsync<object>("elementText", new object[] { }));
}}

Мои js файлы 

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)
}

Это * Вызывается метод 1017 *, но текстовый элемент не добавлен в DOM. Когда я отлаживаю этот метод, я вижу элемент, добавленный к DOM. Позже его снимают. Не могу найти, где его снимают.

1 Ответ

1 голос
/ 10 июля 2020

В 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...