The problem you are encountering is related to the fact that you are using object element which is made to manage external ressources and creates a "sub-window" (like iframe does).
So if you really want to keep this approach, the only way you have to manipulate the content loaded through <option> is to wait for the content to be loaded and target <svg> element inside the sub-window.
Note that due to CORS restrictions, this will only work if the content you load comes from the same server as your page.
Here is a simple Stackblitz example demonstrating the solution.
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div>
<object data="/assets/debug.svg" type="image/svg+xml" height="450" width="650" #dataSvg></object>
</div>
`,
})
export class AppComponent implements AfterViewInit {
@ViewChild('dataSvg') dataSvg: ElementRef;
ngAfterViewInit() {
const elemnentRef = this.dataSvg;
// when content is loaded...
elemnentRef.nativeElement.contentWindow.addEventListener('load', function (event) {
// ...retrieve svg element
const document = elemnentRef.nativeElement.contentWindow.document;
const svg = document.querySelector('svg');
// create a circle
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttributeNS(null, 'cx', 50);
circle.setAttributeNS(null, 'cy', 50);
circle.setAttributeNS(null, 'r', 40);
circle.setAttributeNS(null, 'fill', 'red');
// append it to existing content
svg.append(circle);
});
}
}
objecttag instead of asvgone ?