Как можно создавать SVG фигуры около начала координат и потом помещать на нужное место

#css #svg

                    
Мне нужно некоторое количество похожих фигур SVG разместить в разные места на экране.

Фигуры различаются только размером, углом поворота и цветом, но сам контур одинаковый.

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

То есть я использую какую-то (какую?) конструкцию языка SVG и говорю поместите мою
фигуру в это место.

Можно ли это сделать, если можно то как? Необходимо решение без JavaScript, либо
понимание что такое сделать нельзя.
    

Ответы

Ответ 1

Размещаем прямоугольник  и  в секции   поэтому фигуры не будут
видны до вызова их из хранилища. 






  

Вызов из хранилища, позиционирование, трансформация фигуры, всё это можно сделать
с помощью команды  



rect, circle{
fill:inherit;
stroke:inherit;
}





Обратите внимание     

На стилизацию фигур при использовании команды  
Так как при применении команды  для вызова и клонирования фигур из секции 
последние попадают, в так называемый Shadow DOM, стилизация будет невозможна, если
не применить принудительное наследование   

rect, circle{
fill:inherit;
stroke:inherit;
}