如何使用JQuery缩放SVG元素以适合父元素

Question

Simple code below:

I am trying to copy a svg element in the document and append it to another element.

But I need to resize the svg to fit the new element only using JS.

const $SVG = $('svg').clone();

//Resize SVG

$('li').append($SVG);

Answer 1

Try using CSS:

li{
  width: [some dimension in px];
  height: [some dimension in px];
}
li svg{
  display:inline-block;
  width:100%;
  height:100%;
}

Answer 2

I don't know about jQuery but you could take a look at a script i wrote that helps scale a svg path with it's parent element by adding a simple attribute, data-rel-d . Check it out here: https://github.com/mrdivinemaniac/RelativePath.js