inline SVG presentational attributes(width,height) are overriden by other svg css

[anirudha001]

Hi @palerdot and @tinaboyce
SVG presentational attributes(her width,height) are easily overridden by other external css.
Hence, the inline style element should be used to set width and height of SVG element.
IT SHOULD BE SOMETHING LIKE THIS -->
Check attr() and style() methods on svg below

_renderSVG(a){var b=a.container,c=a.config;return(0,_d.select)(b).append("svg:svg").attr("class","speedometer").style("width",c.width).style("height",c.height)}

INSTEAD OF -->

_renderSVG(a){var b=a.container,c=a.config;return(0,_d.select)(b).append("svg:svg").attr("class","speedometer").attr("width",c.width).attr("height",c.height)}

Please can you make this small change and commit.

Check below link for refrence and understanding problem.
https://css-tricks.com/presentation-attributes-vs-inline-styles/

[palerdot]

Please share a reproducible sandbox stating what is the current behaviour and expected behaviour. The code snippet you shared is the generated one (not the source) and it is not clear what you are trying to achieve.

[anirudha001]

Hi Arun,
Please check this Reproducible sandbox
And magic happens, Speedometer disappears.
Please let my know is there any way to apply style to ReactSpeedometer SVG.
There are 2 ways to apply width and height to Speedometer SVG:

1. Using
2. Using style as <svg style={{width:"200px", height="200px"}} />
   Currently your library uses 1st method which is not recommended. Because global svg inline width and heigh if any, overrides the ReactSpeedometer SVG size.

Check global styles.css file in Reproducible sandbox :
svg {
width: 25px;
height: 25px;
}

[palerdot]

@anirudha001 Thanks for the context ... I will look into this and update more on this in this issue ...

[palerdot]

This issue is fixed in v0.7.3 ... There is an additional prop dimensionUnit which defaults to px for width/height ... Possible values - "em" , "ex" , "px" , "in" , "cm" , "mm" , "pt" , "pc" ... Reference - https://codesandbox.io/s/loving-grass-kbx7f