Элемент "эллипс", созданный с помощью JS, не отображается в HTML

Ein2012 Опубликовано в Dev

Ein2012

Я новичок в svg. Я пытаюсь создать элемент эллипса с помощью JS и добавить его в тег SVG. HTML-код

<svg width="640" height="480">
  
<ellipse  cx="200" cy="100" rx="90" ry="60" stroke-width="10" stroke="orange" fill="none" opacity="0.6"/>
  
  <ellipse  cx="200" cy="100" rx="70" ry="40" stroke-width="10" stroke="green" fill="none" opacity="0.6"/>
  
</svg>

Ниже приведен код JS

<script type="text/javascript">

    var el=document.createElement('ellipse');

    $(el).attr("cx",300);
    $(el).attr("cy",200);
    $(el).attr("stroke","red");
    $(el).attr("stroke-width","10");
    $(el).attr("fill","green");
    $(el).attr("rx",120);
    $(el).attr("ry",80);
 
    $("svg").append(el);

</script>

Но эллипс не отображался в области просмотра, но когда я проверял HTML, я обнаружил, что созданный мной элемент эллипса добавлен к SVG. в чем разница при создании таким образом и каков правильный подход к динамическому добавлению элементов в SVG

К вашему сведению, я вижу изображение ниже

Гуффа

У вас есть собственный HTML-элемент вместо SVG-элемента. Используйте createElementNSдля создания элемента SVG:

$(function(){

  var el = document.createElementNS("http://www.w3.org/2000/svg", 'ellipse');

  el.setAttribute('cx', 300);
  el.setAttribute('cy', 200);
  el.setAttribute('stroke', "red");
  el.setAttribute('stroke-width', 10);
  el.setAttribute('fill', "green");
  el.setAttribute('rx', 120);
  el.setAttribute('ry', 80);

  $("svg").append(el);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="640" height="480">
  
<ellipse  cx="200" cy="100" rx="90" ry="60" stroke-width="10" stroke="orange" fill="none" opacity="0.6"/>
  
  <ellipse  cx="200" cy="100" rx="70" ry="40" stroke-width="10" stroke="green" fill="none" opacity="0.6"/>
  
</svg>

Эта статья взята из Интернета, укажите источник при перепечатке.

Если есть какие-либо нарушения, пожалуйста, свяжитесь с[email protected] Удалить.

Отредактировано в2021-04-2

я говорю два предложения

0обзор

Войти в системуУчаствуйте в комментариях

предыдущий:make - цель правила шаблона, ошибочно считающаяся промежуточной

TOP список

Статья

Элемент "эллипс", созданный с помощью JS, не отображается в HTML

Элемент "эллипс", созданный с помощью JS, не отображается в HTML

Распределение Рэлея Curve_fit на Python

How to click an array of links in puppeteer?

В типе Observable <unknown> отсутствуют следующие свойства из типа Promise <any>.

Как добавить Swagger в веб-API с поддержкой OData, работающий на ASP.NET Core 3.1

Нарисуйте диаграмму с помощью highchart.js

无法通过Vue在传单中加载pixiOverlay

Отчеты Fabric Debug Craslytic: регистрация, отсутствует идентификатор сборки, применить плагин: io.fabric

Статус HTTP 403 - ожидаемый токен CSRF не найден

TypeError: store.getState não é uma função. (Em 'store.getState ()', 'store.getState' é indefinido, como posso resolver esse problema?

ContentDialog.showAsync в универсальном оконном приложении Win 10

В UICollectionView порядок меняется автоматически

Merging legends in plotly subplot

Elasticsearch - Нечеткий поиск не дает предложения

Bogue étrange datetime.utcnow()

Объединение таблиц в листе Google - полное соединение

Single legend for Plotly subplot for line plots created from two data frames in R

как я могу удалить vue cli 2?

ViewPager2 мигает / перезагружается при смахивании

Компилятор не знает о предоставленных методах Trait

JDBI - В чем разница между @define и @bind в JDBI?

проблемы с AVG и LIMIT SQL