Utilizing a js library called mermaid to create svg on a webpage, I am in need of dynamically applying styling to specific parts of the svg when users activate different commands through keyboard shortcuts. Specifically, I aim to highlight the element in the svg that is currently marked as the selected one in the logical model. While researching other methods for dynamically styling svg elements primarily focus on inlined static svgs, they do not seem to be applicable in my scenario. Unfortunately, none of the approaches I have attempted so far have proven to be successful.
The style I am endeavoring to implement is
border-radius : 2rem; box-shadow : 0 0 3rem red;Initially, I tried incorporating this as a class within a <style> element in the following manner:
<style>
.highlight {
border-radius : 2rem;
box-shadow : 0 0 3rem red;
}
</style>
Incorporating the class into an ordinary html element's class list like div, span, or p produced the desired styling effect. However, adding the class programmatically to a svg element through its class list did not result in the glowing border displayed. Despite confirming the relevant class was added to the element's class list by examining it in Chrome developer tools, the unsuccessful outcome left me perplexed. The method used to add the class is shown below:
graphicDiv.querySelector(selector).classList.add('highlight')Since the previous attempt failed, I speculated that there might be some internal styling within the svg's child elements overriding my styles. Subsequently, I altered my styles by including !important to elevate their precedence level. Nevertheless, this approach also proved futile. Consequently, I proceeded to set the style property directly on the element, which should inherently possess the highest precedence:
graphicDiv.querySelector(selector).setAttribute('style', 'border-radius : 2rem !important; box-shadow : 0 0 3rem red !important;')Despite setting the style attribute successfully, no notable variation in the svg's styling appeared. Further inspection using Chrome dev tools confirmed the style attribute was indeed incorporated.
An additional strategy entailed appending my style definition to the svg's parent element after generating the svg, however, even this method yielded no discernible outcomes.
As a final resort, considering the possibility that these css properties may not be supported by svg elements, I modified them to background-color: green; instead. This adjustment also proved ineffective, leading me to try applying the new style to a rect element within the svg without success.
Amidst all these unsuccessful attempts, I find myself utterly bewildered as to why none of the strategies employed have been effective. Any guidance or insight on how I could dynamically alter the styling of svg components would be greatly appreciated!