Вставить SVG в другой SVG, jQuery

Я добавляю много пустых SVG, таких как мозаика, в svg под названием «фон», например:

var baseView = document.createElementNS(svgNS,"rect"); 
baseView.setAttributeNS(null,"id",id);
baseView.setAttributeNS(null,"x",xOff);
baseView.setAttributeNS(null,"y",yOff);
baseView.setAttributeNS(null, 'height', bD);
baseView.setAttributeNS(null, 'width', bD);
baseView.setAttributeNS(null,"fill",'red');
baseView.setAttributeNS(null,"stroke","none");
document.getElementById("background").appendChild(baseView);

Где определяется фон:

<svg id = "background" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"/>

Затем я пытаюсь встроить дополнительный SVG в SVG baseView:

var trunkView = document.createElementNS(svgNS, 'rect'); 
trunkView.setAttributeNS(null,"id",trunkID);
trunkView.setAttributeNS(null,"x",xInset);
trunkView.setAttributeNS(null,"y",yInset);
trunkView.setAttributeNS(null, 'height', (bD/2 + branchWidth));
trunkView.setAttributeNS(null, 'width', trunkWidth);
trunkView.setAttributeNS(null,"fill","black");
trunkView.setAttributeNS(null,"stroke","none");
baseView.appendChild(trunkView);

Я также пробовал:

document.getElementById(id).appendChild(branchView);

Когда я добавляю непосредственно к svg «фон», дочерний «trunkView» добавляется правильно и отображается, но не тогда, когда он встроен в «baseView». Согласно браузеру, он говорит, что он есть, но не отображается. Любые идеи?

javascript jquery html svg

17.04.2018 20:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

102

Ответы 1

Если вы посмотрите на характеристики прямоугольных элементов, вы увидите следующее:

Content model:
Any number of the following elements, in any order:
animation elements — ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘set’
descriptive elements — ‘desc’, ‘metadata’, ‘title’

Таким образом, элементы «rect» не допускаются в качестве содержимого элементов «rect», что объясняет, почему они не отображаются.

См .: https://www.w3.org/TR/SVG11/shapes.html#RectElement

Обновлено:

Чтобы сгруппировать элемент, вы можете использовать элемент «g». Как это:

var baseView = document.createElementNS('http://www.w3.org/2000/svg',"rect"); 
baseView.setAttributeNS(null,"id",5);
baseView.setAttributeNS(null,"x",5);
baseView.setAttributeNS(null,"y",5);
baseView.setAttributeNS(null, 'height', 100);
baseView.setAttributeNS(null, 'width', 100);
baseView.setAttributeNS(null,"fill",'red');
baseView.setAttributeNS(null,"stroke","none");
document.getElementById("group").appendChild(baseView);
var trunkView = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 
trunkView.setAttributeNS(null,"id",10);
trunkView.setAttributeNS(null,"x",40);
trunkView.setAttributeNS(null,"y",40);
trunkView.setAttributeNS(null, 'height', 100);
trunkView.setAttributeNS(null, 'width', 100);
trunkView.setAttributeNS(null,"fill","black");
trunkView.setAttributeNS(null,"stroke","none");
document.getElementById("group").appendChild(trunkView);

<svg id = "background" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink">
<g id = "group"></g>
</svg>

См .: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

Нет возможности встроить детей? Мне нужно иметь возможность анимировать, вращать родительский элемент, и я бы подумал о том, чтобы сделать родительский элемент обычным div, но хочу повысить производительность.

— 18.04.2018 02:09

см. мое редактирование, вы можете использовать элементы 'g', которые созданы для группировки других элементов svg.

— 18.04.2018 03:03

17.04.2018 23:23