I have a <style> tag inside a svg image with background-color property set to white. And I am dynamically adding this svg to the HTML. As the background-color is set to white, all other svgs on the webpage are inheriting this property which is unwanted. It seems the properties are applied globally, but I want to scope the property to this single svg or this single div
Earlier there was scope attribute for <style> which is now removed. How can I achieve this, specially in angular. Angular view encapsulation is not working in this case.
<div class="svg-image">
<svg>
<style>
svg {
background-color: white;
}
</style>
<g>
.
.
</g>
</svg>
</div>
apply custom class to your svg as folows,
app.component.html
<div class="svg-image">
<svg class="svg-background-white">
<g>
.
.
</g>
</svg>
</div>
app.component.css
.svg-background-white {
background-color: white;
}