inline SVG presentational attributes(width,height) are overriden by other svg css about react-d3-speedometer HOT 4 CLOSED

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.

from react-d3-speedometer.

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;
}

from react-d3-speedometer.

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

from react-d3-speedometer.

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

from react-d3-speedometer.