Haha yes its working, but in the Angular documentation they discourage the use of direct DOM manipulation methods.
Another question over the compound paths functionality in Illustrator. It creates from rects, circles, polygons one big path.
Normal SVG:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="52" height="38" viewBox="0 0 52 38">
<title>portfolio-2</title>
<rect y="15" width="52" height="9" fill="#e1eae5"/>
<rect y="30" width="52" height="8" fill="#e1eae5"/>
<rect width="52" height="9" fill="#e1eae5"/>
</svg>
Compound SVG:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="52" height="38" viewBox="0 0 52 38">
<title>portfolio-2</title>
<path d="M20,31H72v9H20V31Zm0,23H72V46H20v8Zm0-38v9H72V16H20Z" transform="translate(-20 -16)" fill="#e1eae5"/>
</svg>
Its like the convertToPath method but it merge all the rects into one path.
When i use this svg element to create a morph it end up off center. I tried it with and without the transform attribute.
<svg #sideMenuBtn (click)="setStateSideMenu()" id="menu-btn" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="52" height="42.9" viewBox="0 0 52 42.9">
<polygon id="end" points="47.12 6.13 40.99 0 25.67 15.32 10.35 0 4.22 6.13 19.54 21.45 4.22 36.77 10.35 42.9 25.67 27.58 40.99 42.9 47.12 36.77 31.8 21.45 47.12 6.13" fill="#e1eae5"/>
<path id="start" d="M20,31H72v9H20V31Zm0,23H72V46H20v8Zm0-38v9H72V16H20Z" transform="translate(-20 -13.88)" fill="#e1eae5"/>
</svg>
So my question is it possible to use compound paths or do I something wrong?