snap.svg - embed svg in svg

Question

I'm using snap-svg to display some SVG. I used this answer to do so in react.js.

However, I'd like to take it a step further: is it possible to load 2 svgs from urls, and then embed one inside of the other ?

So far, I managed to load my two SVGs, and then add them to my div, using this simple bit of code

const element = Snap(this.svgDiv)

Snap.load(url, function (baseProduct) {
  if (element) {
    element.add(baseProduct);

    let designUrl = [my url]

    Snap.load(designUrl, function (design) {
      if (element) {
        console.log(baseProduct);

        baseProduct.select('rect').attr({fill: 'transparent'})
        const image = design.select('image');
        baseProduct.select('rect').add(image)
      }
    })
  }
})

Unfortunately, this only displays the first image: the second one, which is supposed to be displayed inside of a rect,is not displayed. However, if I inspect my SVG, the img tac can be found inside of my rect. How comes so ?

Sure it's possible. What problem are you encountering when you try to do it? — Robert Longson, Jun 05 '19 at 10:56
@RobertLongson I edited the question so that you can see my problem — Pierre Olivier Tran, Jun 05 '19 at 12:00
you need to change the second load so it uses something within the first SVG rather than element. — Robert Longson, Jun 05 '19 at 12:18
@RobertLongsonI see what you meant, I managed to do so, and therefore edited the question — Pierre Olivier Tran, Jun 05 '19 at 15:00
@RobertLongson indeed, my bad. I tried to rethink how to display it, by selecting the image within my second SVG, then turning it into a pattern, and filling the rect with this pattern, but this doesn't display anything (i guess it is expecting a real image, and not an html one). Is there a way to turn the loaded Frament into a pattern ? — Pierre Olivier Tran, Jun 05 '19 at 15:50

snap.svg - embed svg in svg

0 Answers0