Создание SVG на лету и ссылка в CSS [дубликат] ⇐ CSS

[Гость]

Я пытаюсь создать элемент svg «на лету», добавить его в тело и изменить таблицу стилей CSS, чтобы она ссылалась на определенное свойство класса на идентификатор svg. SVG выглядит следующим образом:

| путь> | "M0 2h8"> А CSS выглядит так:

.pattern-1 {fill: url("#pattern-1);} Это работает, если я добавляю эти элементы в HTML самостоятельно, но когда я создаю SVG и CSS «на лету», SVG не добавляется к моим элементам. Если я добавляю svg в HTML и создаю CSS на лету, он работает, поэтому, похоже, это зависит от svg. Есть какие-нибудь советы, как это сделать?

РЕДАКТИРОВАТЬ: я использую эти два метода для создания CSS и SVG на лету:
функция createPatternCss(id) { вар стиль = document.createElement('стиль'); var code = `.${id} {fill: url("#pattern-${id}");}`; varsheet = getStyleSheet("hatchstyles"); если (style.styleSheet) { лист.styleSheet.cssText = код; } еще { style.innerHTML = код; } document.getElementsByTagName("head")[0].appendChild(стиль); } функция createPatternSvg (id, цвет, вращение) { var шаблоны = document.getElementById("шаблоны"); var шаблон = ` | > | "М0 2ч8"/> `; var doc = новый DOMParser().parseFromString(шаблон, "текст/xml"); шаблоны.appendChild(doc.firstChild); }