0
243
ViewsInsertar elementos SVG de otro elemento SVG con JS simple
Estoy tratando de representar dinámicamente el contenido de un elemento SVG usando la biblioteca svg.js ( https://svgjs.dev ). Todo funciona bien al crear elementos básicos, como líneas, polígonos y texto simple y trabajar con sus propiedades.
Ahora, me gustaría extender el dibujo con elementos más complejos usando SVG listos para usar (disponibles en un div oculto en la página o por otros medios), que necesito 'clonar' de alguna manera al elemento SVG principal y también ajustar el tamaño y posición.
La imagen a continuación es un ejemplo de lo que estoy tratando de lograr: el rectángulo se crea con svg.polygon svg.polygon().plot(... ) de svgjs, y me gustaría agregar los árboles.
¿Cuál sería la forma simple/correcta de hacer esto?
1 answers
Answer question0
Una vez más, una buena noche de sueño proporciona la respuesta correcta y es mucho más fácil de lo que esperaba.
Resulta que todo lo que se necesita es un use , con la identificación del elemento svg y, opcionalmente, una URL desde la que cargar el archivo SVG, lo que evita que uno incruste el SVG en la página:
// the definition of the object to embed // holds the item id, and transformation data var item = ...; var g = svg .group() .use( item.src, resURL + '/svg/sprites.svg') .transform({ translateX : item.x, translateY : item.y });Para archivos SVG fuera de su dominio, probablemente necesite cargarlos de manera diferente.
Según lo solicitado, a continuación se muestra un ejemplo de código aún parcial, pero más detallado; agregar el código completo haría que la solución fuera difícil de seguir.
DESCARGO DE RESPONSABILIDAD: todavía no he llegado a las optimizaciones / refactorización, así que sí, probablemente haya mucho espacio para mejorar tanto en los datos como en el código.
Los datos son una estructura JSON así:
{ "items" : { "item1" : { "points" : [[1600,200],[2300,200],[2300,600],[1600,600],[1600,200]], "fill" : "rgba(144, 238, 144, 0.3)", "stroke" : "#228B22" }, "item2" : { "src":"sprite1" "style":{ "opacity" : 0.3 }, "position":{ "x" : -360, "y" : 75, "scale" : 0.8 }, } }, }El procesamiento es así:
var svg = SVG("#drawing-" + floor.key) Object.keys(floor.items).forEach(function(key,index) { var item = floor.items[key]; if (item.hasOwnProperty('points')) { var polygon = svg .polygon() .stroke({ color: item.stroke }) .fill(item.fill); polygon.plot(item.points); } else if (item.hasOwnProperty('src')) { var g = svg .group() .use(item.src, resURL + '/svg/plan-sprites.svg') .transform({ translateX : item.position.x, translateY : item.position.y, scale : item.position.scale || 1.}) .css(item.style || { }); } });Cuando haya terminado, la página se ve así (simplificado):
<svg id="drawing-curte" class="hwb-drawing" <g id="viewport"> <polygon points="1600,200 2300,200 2300,600 1600,600 1600,200" stroke="#228b22" fill="#90ee90"></polygon> <g><use xlink:href="/resources/svg/plan-sprites.svg#sprite1" transform="matrix(1,0,0,1,1550,150)"></use></g> </g> </svg>